Responsive Club website is driving me nuts

Hello - everything seems to be going ok, except I can’t get my last 4 photos to stack horizontally. The 4th photo wants to live under the other three and it’s really stubborn.

HALP.

<div id="photos">
    <img src="./gardening1.jpg">
    <img src="./gardening2.jpg">
    <img src="./gardening3.jpg">
    <img src="./gardening4.jpg">
  </div>

#photos {
  width: 900px;
}

#photos img {
  position: relative;
  top: 350px;
  width: 25%;
  display: inline-block;
}

You could make one small change to your css, as below, and then your images should display horizontal

#photos {	
  display: flex;
  width: 900px;  

}

#photos img {
  position: relative;
  top: 350px;
  width: 25%;
  display: inline-block;
}
1 Like