CSS for image layout issues - css

Question

I'm learning responsive CSS, so this is all fairly new to me. However, why aren't the images on the 2nd row hugging the top images?
Ideally I just want 4 images per row, but if on a smaller screen or phone etc. it will dynamically reduce the image size and reduce the number of images per row. Cannot seem to get this working? Any help is appreciated! All CSS relative for the images is on that one static page.
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 10px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: right;
width: 24.99999%;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://memorybox.pt">
<img src="images/memory-box.png" alt="Algarve Wedding Photography" width="600" height="400">
</a>
<div class="desc">Algarve Wedding Planners</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://algarvedjhire.com/">
<img src="images/algarve_dj_hire.jpg" alt="Algarve Wedding Photography" width="600" height="400">
</a>
<div class="desc">Algarve DJ & Music</div>
</div>

Answer 1

Use height and instead of float right use float left in your .responsive class. See example below. I use height 290px you can use based on your need.
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
height: 290px;
}
Also you can use margin-bottom in your responsive break point so that it's look good. See example below.
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0 30px 0;
}
}