Weird behaviour of Google Chrome's responsive website checker

Question

I am trying to create a responsive website, I've used a basic reset.css from this website and whenever I'm going on the inspect tool and changing it to responsive, the nav-bar or the whole website shows a weird behaviour.

[This is the console as well as my code ](https://i.stack.imgur.com/lsQ2i.png)

While I shrink my browser window outside of this inspect tool or developer tool, I do not encounter any white space but as soon as I enter the responsive mobile view, around 600 px I am facing this issue and it's really frustrating as the background color and elements all just disappear.

The HTML code for the nav-bar:

<nav class="main-class">
        <div class="nav-elements" id="logo">
          <img src="Musicology-logo.png" alt="logo" />
        </div>
        <div class="nav-elements" id="nav-text">
          <ul class="nav-ul">
            <li><a href="#pg1">HOME</a></li>
            <li>PRODUCT</li>
            <li>PROMO</li>
            <li><a href="#pg6">ABOUT</a></li>
            <li><a href="#pg8">CONTACT</a></li>
          </ul>
        </div>
        <div class="nav-elements" id="search-logo">
          <img src="Search.png" alt="search" />
        </div>
      </nav>

This is the CSS I'm using:

.main-class {
    background-color: #303030;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-width: 100%;
  }
  .nav-elements {
    margin-left: 3rem;
    margin-right: 3rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .nav-ul {
    display: flex;
    flex-direction: row;
    width: inherit;
    gap: 1.5em;
    font-size: 1.53em;
    /* position: relative; */
  }
  #nav-text {
    color: #ffffff;
    font-weight: 400;
    font-family: "Oswald", sans-serif;
  }
  a{
    text-decoration: none;
    color: #ffffff;
    font-weight: 400;
    font-family: "Oswald", sans-serif;
  }

I feel like this is a Google Chrome issue rather than my code.