Hello, In body I have the header, two div tags and a footer In the second div I have three section tags in which I have an ul with 8 li each have an a tag with an img and a p tag just like in the course.

I'm using the max-width: 100%; and height: auto; also but nothing, the image doesn't change, they just keep pushing each other under.

I add the html code for the list and the css which corresponts to it, any idea how to fix this?

<section class="third"> <ul id="produse"> <li> <a> <img src="img/JaluzeleVerticale_02.png" alt="Jaluzele Verticale"> <p>Jaluzele Verticale</p> </a> </li> <li> <a> <img src="img/JaluzeleOrizontale_02.png" alt="Jaluzele Orizontale"> <p>Jaluzele Orizontale</p> </a> </li> <li> <a> <img src="img/RulouriExt_02.png" alt="Rulouri Exterioare"> <p>Rulouri Exterioare</p> </a> </li> </ul> </section>

CSS

.third { padding: 0 5%; margin: 0 auto; width: auto; }

produse {

flex: auto;
margin: 0;
padding: 0;
list-style: none;
width: auto;

}

produse li {

float: left;
width: auto;
margin-bottom: 15px;
margin-left: 1.95%;
margin-right: 1.95%;
background-color: #6699FF;
color: black;

}

produse li a {

padding: 0;

}

produse li a img {

max-width: 100%;
height: auto;

}

produse li a p {

margin: 2px;
font-size:  0.75em;
color: black;
text-align: center;

}