Responsive Design Nav Button Layout Issue

Question

I'm just learning html / css here. right now I'm trying to get my first webpage set with responsive design. I've got everything else set to reduce to a single column layout when the viewport is reduced to 500px or less with media queries. Everything but my navigation buttons. Currently, they compress, and the last <a> element shifts below the rest, but I'm trying to get the last two <a> elements to shift underneath the first two, to form a cube like layout of all 4 buttons while maintaining the display: inline-block layout when the viewport is over 500px... If that makes sense.

Not sure if this would have anything to do with the issue, but the images used for the buttons are 563x193 by default, with their height set to 40 to reduce their sizes on the webpage.

My current HTML and CSS for the nav buttons is as follows. Be gentle, I'm new and clueless.

nav {
  text-align: center;
}

nav a {
  display: inline-block;
  margin: 0 10px;
}


/* Breakpoint 1 */

@media screen and (min-width: 200px) and (max-width: 500px) {
  .sampsonworks-logo {
    width: 95%;
  }
  #main_home {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
  }
  nav a {
    margin: 0px;
  }
  #left_section,
  #middle_section,
  #right_section {
    width: 95%;
    box-sizing: border-box;
    margin: 0 auto;
  }
}

<nav>
  <a href="/aboutme/aboutme.html">
    <img src="/img/buttons/about_me.jpg" alt="" height="40">
  </a>
  <a href="/artwork/artwork.html">
    <img src="/img/buttons/3d_artwork_button.jpg" alt="" height="40">
  </a>
  <a href="/services/services.html">
    <img src="/img/buttons/services_button.jpg" alt="" height="40">
  </a>
  <a href="/contact/contact.html">
    <img src="/img/buttons/contact_me_button.jpg" alt="" height="40">
  </a>
</nav>

I've tried the following changes to CSS. This does set the buttons into the desired 2x2 grid, but there are huge gaps between the buttons that I cannot seem to reduce with margin or width changes.

nav {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

nav a {
    display: inline-block;
    margin: 0 10px;
}

@media screen and (max-width: 500px) {
    nav a {
        width: 45%;
  }
}
  

Answer 1

Without all of your HTML code, it is hard to find out exactly what will fix your specific issue, but I tested the code you gave, and here is what I did to answer your question the best I could.

---

I added this below the nav a {} selector:

@media screen and (min-width: 501px) {
    nav {
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        position: relative;
    }
    nav > a {
        width: 50%;
    }
}

---

If you have any questions or have more insight on your code, please feel free to comment and let me know.