CSS html images not stacking across - html

Question

I am working on a course on CSS from Udemy called "Build Responsive Real World Websites with HTML5 and CSS3"
The images are supposed to stack across, like this:
image1 image2 image3 image 4.
But they are stacking down, like this:
image1
image2
image3
image4
The code is copied exactly, word for word.
Did I make a typing error?
To try and isolate the problem, I extracted the nonfunctional code into a separate file. I also tried to add
figure {
display: block;
float: left;
}
But that didn't work either. However this is not a part of the code that the instructor had given.
I would like to see the instructor-given code working, since ideally, I want to keep following along the same code as he gave to continue the book, so I am hoping there is maybe a syntactical issue or something, but I just can't figure it out....
Here is the code I extracted:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.meals-showcase {
list-style: none;
width: 100%;
}
.meals-showcase li {
display: block;
float: left;
width: 25%;
}
.meal-photo {
width: 100%;
margin: 0;
}
.meal-photo img {
width: 100%;
height: auto;
}
<section class="section-meals">
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="resources/img/1.jpg" alt="Korean bimimbap with egg and vegetables">
</figure>
<figure class="meal-photo">
<img src="resources/img/2.jpg" alt="Chinese sholik with egg and vegetables">
</figure>
<figure class="meal-photo">
<img src="resources/img/3.jpg" alt="Indian Hamachaji with">
</figure>
<figure class="meal-photo">
<img src="resources/img/4.jpg" alt="Korean goolash with egg">
</figure>
</li>
</ul>
</section>

Answer 1

try with every figure tag inside li tag I think that what are you trying:
<section class="section-meals">
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="resources/img/1.jpg" alt="Korean bimimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/2.jpg" alt="Chinese sholik with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/3.jpg" alt="Indian Hamachaji with">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/4.jpg" alt="Korean goolash with egg">
</figure>
</li>
</ul>
</section>

Answer 2

Try changing the size of your photos. I see that your code has 100% width for some of the photos. If that doesn't work, try using float:top; instead of float:left;.

Answer 3

.meal-photo has a width of 100% so no images will display aside of it if you remove that and replace it with display: inline-block; it should work however your other problem is .meals-showcase li width is 25%. remove that then your images will display next to each other horizontally.
NOTE: Figure and DIV elements are display: block; by default so they will always stack on top of each other unless otherwise specified through css. SPAN tags are display: inline; by default so they would be a better option, in this case, saving you time in code.