'Justify-Content isn't working to add space between or around - flexbox problem

I am having trouble with my code. I am trying to utilize justify-content to add space around my sub-navigation class. However, it isn't working. I took off flex-grow for my search form button but I'm still running into the same issue. I have been adding justify-content:space around for my "sub-nav" class which should be correct given that is the parent for all of the elements I would like to add space-around. Any advice?

*{
    padding: 0;
    margin: 0;
}

.main-nav, .sub-nav{
    display: flex;
}

.main-nav{
    background-color: #44b;
    justify-content: space-between;
}

.short-width{
    display: flex;
}

.full-width{
    display: none;
}

@media(min-width: 768px){
    .short-width{
        display: none;
    }
    .full-width{
        display: flex;
    }
}

.nav-list{
    display: flex;
    flex-direction: row;
}

.nav-list a{
    border-right: 1px solid white;
    padding: 5px;
    color:seashell;
    text-decoration: none;
}

.nav-list li:last-of-type a{
    border-right: none;
}

ul li{
    list-style-type: none;
}

.sub-nav{
 justify-content: space-around;
 margin-top: 10px;
}

.search-form{
    width: 100%;
    display: flex;
    padding: 5px;
    border: 0;
}

.search-form input{
    border-top: none;
    border-left:none;
    border-right:none;
    border-bottom: 1px solid blue;
    /* flex-grow: 1; */
}

.search-form button{
    background-color: #44b;
    color: seashell;
    text-align: center;
    padding: 2px;
}

.company-name{
    color: #44b;
    font-size: 2rem;
    padding: 2px;
}

.credit-offer{
    background-color: red;
    padding: 6px;
    color:seashell;
    text-decoration: none;
    white-space: nowrap;
    height: fit-content;
    margin-top: 5px;
    text-align: center;
    /* width: 5%; */
}

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Material+Icons|IM+Fell+Great+Primer+SC|Dosis|Open+Sans+Condensed:300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="header.css">
  </head>
  <body>
    <header>
      <nav class="main-nav">
        <ul class="horizontal nav-list">
          <li><a href="/big_deals">Big Deals</a></li>
          <li><a href="/top_brands">Top Brands</a></li>
          <li><a href="/suggestions">Suggestions</a></li>
          <li><a href="/help_contact">Help & Contact</a></li>
        </ul>
        <ul class="horizontal nav-list full-width">
          <li><a href="/log_in">Log In/Sign Up</a></li>
          <li><a href="/me">Account</a></li>
          <li><a href=""><i class="material-icons">shopping_cart</i></a></li>
        </ul>
        <ul class="horizontal nav-list short-width">
          <li><a href=""><i class="material-icons">menu</i></a></li>
        </ul>
      </nav>
      <nav class="sub-nav">
        <span class="company-name">
          Qwirty
        </span>
        <form class="search-form" action="/search">
          <input type="text" name="search-term" placeholder="search">
          <button type="submit"><i class="material-icons">search</i></button>
        </form>
        <a class="credit-offer" href="/credit">0% Financing 24 Months</a>
      </nav>
    </header>
  </body>
</html>

html css

Solution 1:^[1]

Your .search-form { width: 100%; } makes your search form try to take up the full width, leaving no room for space-around to have any effect:

*{
    padding: 0;
    margin: 0;
}

.main-nav, .sub-nav{
    display: flex;
}

.main-nav{
    background-color: #44b;
    justify-content: space-between;
}

.short-width{
    display: flex;
}

.full-width{
    display: none;
}

@media(min-width: 768px){
    .short-width{
        display: none;
    }
    .full-width{
        display: flex;
    }
}

.nav-list{
    display: flex;
    flex-direction: row;
}

.nav-list a{
    border-right: 1px solid white;
    padding: 5px;
    color:seashell;
    text-decoration: none;
}

.nav-list li:last-of-type a{
    border-right: none;
}

ul li{
    list-style-type: none;
}

.sub-nav{
 justify-content: space-around;
 margin-top: 10px;
}

.search-form{
    display: flex;
    padding: 5px;
    border: 0;
}

.search-form input{
    border-top: none;
    border-left:none;
    border-right:none;
    border-bottom: 1px solid blue;
    /* flex-grow: 1; */
}

.search-form button{
    background-color: #44b;
    color: seashell;
    text-align: center;
    padding: 2px;
}

.company-name{
    color: #44b;
    font-size: 2rem;
    padding: 2px;
}

.credit-offer{
    background-color: red;
    padding: 6px;
    color:seashell;
    text-decoration: none;
    white-space: nowrap;
    height: fit-content;
    margin-top: 5px;
    text-align: center;
    /* width: 5%; */
}

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Material+Icons|IM+Fell+Great+Primer+SC|Dosis|Open+Sans+Condensed:300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="header.css">
  </head>
  <body>
    <header>
      <nav class="main-nav">
        <ul class="horizontal nav-list">
          <li><a href="/big_deals">Big Deals</a></li>
          <li><a href="/top_brands">Top Brands</a></li>
          <li><a href="/suggestions">Suggestions</a></li>
          <li><a href="/help_contact">Help & Contact</a></li>
        </ul>
        <ul class="horizontal nav-list full-width">
          <li><a href="/log_in">Log In/Sign Up</a></li>
          <li><a href="/me">Account</a></li>
          <li><a href=""><i class="material-icons">shopping_cart</i></a></li>
        </ul>
        <ul class="horizontal nav-list short-width">
          <li><a href=""><i class="material-icons">menu</i></a></li>
        </ul>
      </nav>
      <nav class="sub-nav">
        <span class="company-name">
          Qwirty
        </span>
        <form class="search-form" action="/search">
          <input type="text" name="search-term" placeholder="search">
          <button type="submit"><i class="material-icons">search</i></button>
        </form>
        <a class="credit-offer" href="/credit">0% Financing 24 Months</a>
      </nav>
    </header>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kameron

'Justify-Content isn't working to add space between or around - flexbox problem

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]