Picture Gallery won't align wright (html, css)

Question

I am working on my school project and my Picture Gallery won't fit into the screen as intended.

After the third picture it just goes down instead of align in one row. Any help would be greatly appreciated. Also the sizes are all different from the outline and I have no clue how to make them one size.

 div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto } div.description { padding: 15px; text-align: center; }

 <div class="gallery"> <a target="_blank" href="NationalMall.jpeg"> <img src="NationalMall.jpeg" alt="NationalMall" width="600" height="400"> </a> <div class="description"> National Mall in Washington DC </div> </div> <div class="gallery"> <a target="_blank" href="GrandCanyon.jpeg"> <img src="GrandCanyon.jpeg" alt="GrandCanyon" width="600" height="400"> </a> <div class="description"> GrandCanyon in Arizona </div> </div> <div class="gallery"> <a target="_blank" href="GettysBurg.jpeg"> <img src="GettysBurg.jpeg" alt="Gettysburg" width="600" height="400"> </a> <div class="description"> Gettysburg in Pennsylvania</div> <div class="gallery"> <a target="_blank" href="NewYork.jpeg"> <img src="NewYork.jpeg" alt="NewYork" width="600" height="400"> </a> <div class="description"> NewYork City an der Ostküste </div> </div> <div class="gallery"> <a target="_blank" href="Disneyworld.jpeg"> <img src="Disneyworld.jpeg" alt="Disneyworld" width="600" height="400"> </a> <div class="description"> Disneyworld in Orlando Florida </div> </div> <div class="gallery"> <a target="_blank" href="LasVegas.jpeg"> <img src="LasVegas.jpeg" alt="LasVegas" width="600" height="400"> </a> <div class="description"> Las Vegas in Nevada </div> </div>

Answer 1

There is some code issue in your HTML, you have not added it properly. here i have added HTML and CSS.

CSS CODE

 div.gallery { margin:5px; border: 1px solid #ccc; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width:100%; height:auto } div.description { padding: 15px; text-align: center; }.gallery-items.gallery{ float: left }

 <div class="gallery-items"> <div class="gallery"> <a target="_blank" href="NationalMall.jpeg"> <img src="https://picsum.photos/200/300" alt="NationalMall" width="600" height="400" /> </a> <div class="description">National Mall in Washington DC</div> </div> <div class="gallery"> <a target="_blank" href="GrandCanyon.jpeg"> <img src="https://picsum.photos/200/300 " alt="GrandCanyon" width="600" height="400" /> </a> <div class="description">GrandCanyon in Arizona</div> </div> <div class="gallery"> <a target="_blank" href="GettysBurg.jpeg"> <img src="https://picsum.photos/200/300 " alt="Gettysburg" width="600" height="400" /> </a> <div class="description">Gettysburg in Pennsylvania</div> </div> <div class="gallery"> <a target="_blank" href="GettysBurg.jpeg"> <img src="https://picsum.photos/200/300 " alt="Gettysburg" width="600" height="400" /> </a> <div class="description">Gettysburg in Pennsylvania</div> </div> <div class="gallery"> <a target="_blank" href="GettysBurg.jpeg"> <img src="https://picsum.photos/200/300 " alt="Gettysburg" width="600" height="400" /> </a> <div class="description">Gettysburg in Pennsylvania</div> </div> </div>

Answer 2

Try using.gallery{} and.description{} instead of div.gallery{}