html and css3 display four images in a row

[Khan2014]

trying to display four images in row. html code`

<section class ="selection-meals">
                         <ul class="meal-showcase">
                         <li>
                             <figure class="meal-photo">
                             <img src="resources/css/imgs/1.jpg" alt="meal1">
                             </figure>
                         </li>
                             <li>
                             <figure class="meal-photo">
                             <img src="resources/css/imgs/2.jpg" alt="meal2">
                             </figure>
                         </li>
                                 <li>
                             <figure class="meal-photo">
                             <img src="resources/css/imgs/3.jpg" alt="meal3">
                             </figure>
                         </li>
                                     <li>
                             <figure class="meal-photo">
                             <img src="resources/css/imgs/4.jpg" alt="meal4">
                             </figure>
                         </li>
                             </ul>

                        <ul class="meal-showcase">
                         <li>
                             <figure class="meal-photo">
                             <img src="resources/css/imgs/5.jpg" alt="meal5">
                             </figure>
                         </li>
                             <li>
                             <figure class="meal-photo">
                             <img src="resources/css/imgs/6.jpg" alt="meal6">
                             </figure>
                         </li>
                                 <li>
                             <figure class="meal-photo">
                             <img src="resources/css/imgs/7.jpg" alt="meal7">
                             </figure>
                         </li>
                                     <li>
                             <figure class="meal-photo">
                             <img src="resources/css/imgs/8.jpg" alt="meal8">
                             </figure>
                         </li>
                             </ul>
                     </section>`

CSS3 code

 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;
}

also tried this

ul{
    white-space: nowrap;
}

ul,li{
    list-style:none;
    display: inline;
}

anyone got any suggestions?
thanks alot

[JorgeM]

Basic CSS to display the list horizontally...

ul {
  list-style:none;
}

ul li {
  float:left;
}

[gentlemedia]

It's caused by a typo. In your HTML you have meal-showcase and in your css meals-showcase.

And on a side note; if you float an inline element, it turns automatically into a block element, so declaring it is not needed.

[Khan2014]

thanks so much can not believe i do not spot that.