<img> and <nav> in #globalnav not pushing themselves to max width

Question

I have a fixed header with a global navigation bar. The issue is that the logo and navigation menu in the globalnav are not pushing themselves to the max width of the container. The HTML code for the header is as follows:

<header id="globalnav-container">
    <div id="globalnav-wrapper">
        <div id="globalnav">
            <a href="/" aria-label="Home"><img id="globalnav-logo" src="/images/LogoBlack.png" alt="Logo Black"></a>
            <nav id="globalnav-menu" aria-label="Site navigation">
                <ul id="globalnav-menu-list">
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-web" title="Web Services Dropdown"><a href="#">Web</a></li>
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-mobile" title="Mobile Services Dropdown"><a href="#">Mobile</a></li>
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-desktop" title="Desktop Services Dropdown"><a href="#">Desktop</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

And the CSS code is as follows:

#globalnav-container {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: default;
  height: 45px;
  transition: background 0.2s linear, height 0.2s linear;
}

#globalnav-wrapper {
  max-width: 980px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#globalnav {
  display: flex;
  align-items: center;
}

#globalnav-logo {
  height: 16px;
  object-fit: contain;
  display: block;
  margin: 0;
}

#globalnav-menu-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.globalnav-menu-list-item {
  padding: 0 10px;
}

#globalnav-menu {
  margin: 0;
}

@supports ((-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px))) {
  #globalnav-container {
    backdrop-filter: saturate(180%) blur(20px);
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}

I have set the max-width of the globalnav-wrapper to 980px and centered it using margin: 0 auto. But the logo and navigation menu are not expanding to the full width of the container. How can I make them expand to the full width of the globalnav-wrapper?

Answer 1

You don't need to usedispay:flex; property to parent <div>'s. Only apply dispay:flex; property to .globalnav. Also if you want to use full width, Please remove max-width:980px. Thank you.

#globalnav-container {
  position: fixed;
  top: 0;
  width: 100%;
  cursor: default;
  height: 45px;
  transition: background 0.2s linear, height 0.2s linear;
}

#globalnav-wrapper {
  max-width: 980px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

#globalnav {
  display: flex;
  align-items: center;
  justify-content:space-between;
}

#globalnav-logo {
  height: 16px;
  object-fit: contain;
  display: block;
  margin: 0;
}

#globalnav-menu-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.globalnav-menu-list-item {
  padding: 0 10px;
}

#globalnav-menu {
  margin: 0;
}

@supports ((-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px))) {
  #globalnav-container {
    backdrop-filter: saturate(180%) blur(20px);
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}

<header id="globalnav-container">
    <div id="globalnav-wrapper">
        <div id="globalnav">
            <a href="/" aria-label="Home"><img id="globalnav-logo" src="/images/LogoBlack.png" alt="Logo Black"></a>
            <nav id="globalnav-menu" aria-label="Site navigation">
                <ul id="globalnav-menu-list">
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-web" title="Web Services Dropdown"><a href="#">Web</a></li>
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-mobile" title="Mobile Services Dropdown"><a href="#">Mobile</a></li>
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-desktop" title="Desktop Services Dropdown"><a href="#">Desktop</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>