PHP nth-child in media queries

Question

On MyPage are many pictures. In the normal case are 6 pictures in one row. If you change the size of the browser the number of pictures in each row will change. I solved this problem with media queries. In each row the last picture shouldnt get a margin-right: 5px; . But the nth-child wont change its every time the same, thats why the margin isnt correct. What did i wrong?

Here is my php output for the images:

 <?php $sql = "SELECT * FROM bilder"; $result=mysqli_query($db,$sql); while($row=mysqli_fetch_assoc($result)){ echo "<img class='image' src='$row[bild_pfad]' alt='$row[bild_name]' style='$row[bild_werte]'>"; } ?> 

Here is the css:

 section{ margin: 0px auto; width: 925px; margin-top: 55px; } .image{ object-position: center; /* Center the image within the element */ height: 150px; width: 150px; object-fit: cover; margin-right: 5px; } .image-margin{ margin-right: 5px; } section img:nth-child(6n+6){ margin-right:0; } @media only screen and (max-width : 924px) { /* Five images in each row */ section{ margin: 0px auto; width: 770px; margin-top: 55px; } section img:nth-child(5n+5){ margin-right:0; } } @media only screen and (max-width : 770px) { /* Four images in each row */ section{ margin: 0px auto; width: 615px; margin-top: 55px; } section img:nth-child(4n+4){ margin-right:0; } } @media only screen and (max-width : 615px) { section{ margin: 0px auto; width: 460px; margin-top: 55px; } section img:nth-child(3n+3){ margin-right:0; } } @media only screen and (max-width : 460px) { section{ margin: 0px auto; width: 305px; margin-top: 55px; } section img:nth-child(2n+2){ margin-right:0; } } 

Answer 1

I solved my problem. I had to reset the old nth-child code like this:

 section img:nth-child(6n+6){ margin-right:0; } @media only screen and (max-width : 924px) { /* Five images in each row */ section{ margin: 0px auto; width: 770px; margin-top: 55px; } section img:nth-child(6n+6){ margin-right:5px; } section img:nth-child(5n+5){ margin-right:0; } }