Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <nav id="utility-nav">
        <div class="item-list"><ul><li id="utility-search" class="switch first" title="Search"><a href="/en/search" class="expand" onclick="return false;">Search</a></li>
<li id="utility-account" class="switch" title="Accounts"><a href="https://sso.qa.redhat.com/auth/realms/redhat-external/protocol/saml/clients/legacy-idp-servlets" class="expand" onclick="return false;">Log in</a></li>
<li id="utility-globe" class="switch last" title="Global Preferences"><a href="/en/about/global" class="expand" onclick="return false;">English</a></li>
</ul></div>      </nav>
</div>

<div class="container">
        <div class="logo-mobile-wrap">
          <div id="logo">
            logo
          </div>
        </div>
        <div id="mobile-utility-nav">
        
        </div>
        <nav id="main-nav">
          <ul>
            <li class="first expanded nav-links top-level-wrapper"><a href="/en/technologies">Products</a></li>
<li class="expanded nav-links top-level-wrapper"><a href="/en/challenges">Solutions</a></li>
<li class="expanded nav-links top-level-wrapper"><a href="/en/services">Services &amp; support</a></li>
<li class="leaf nav-links top-level-wrapper"><a href="/en/resources">Resources</a></li>
<li class="last expanded nav-links top-level-wrapper"><a href="/en/about">Red Hat &amp; open source</a></li>
          </ul>
        </nav>
        <div id="to-top">
          <a class="btn_slideto" href="">
          </a>
        </div>
      </div>

SassMeister-input.scss

// ----
// Sass (vundefined)
// Compass (vundefined)
// ----

.container {
  border: black solid 1px;
  display:flex;
  max-width: 1200px;
  border: gray solid 2px;
}
#logo {
  width: 100px; 
  height: 60px;
  background: red;
  display: block;
  text-align: center;
}
#utility-nav {
    width: 100%;
}
#utility-nav  ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

#utility-nav ul li a {
      background-color: #f7f7f7;
      padding: 24px 20px;
      display:block;
}
#main-nav {
  width: calc(100% - 100px);
}
#main-nav  ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#main-nav ul li a {
      background-color: #f7f7f7;
      padding: 24px 20px;
      display:block;
      font-size: 20px;
}

SassMeister-output.css

.container {
  border: black solid 1px;
  display: flex;
  max-width: 1200px;
  border: gray solid 2px;
}

#logo {
  width: 100px;
  height: 60px;
  background: red;
  display: block;
  text-align: center;
}

#utility-nav {
  width: 100%;
}

#utility-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

#utility-nav ul li a {
  background-color: #f7f7f7;
  padding: 24px 20px;
  display: block;
}

#main-nav {
  width: calc(100% - 100px);
}

#main-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#main-nav ul li a {
  background-color: #f7f7f7;
  padding: 24px 20px;
  display: block;
  font-size: 20px;
}

SassMeister-rendered.html

<div class="container">
  <nav id="utility-nav">
        <div class="item-list"><ul><li id="utility-search" class="switch first" title="Search"><a href="/en/search" class="expand" onclick="return false;">Search</a></li>
<li id="utility-account" class="switch" title="Accounts"><a href="https://sso.qa.redhat.com/auth/realms/redhat-external/protocol/saml/clients/legacy-idp-servlets" class="expand" onclick="return false;">Log in</a></li>
<li id="utility-globe" class="switch last" title="Global Preferences"><a href="/en/about/global" class="expand" onclick="return false;">English</a></li>
</ul></div>      </nav>
</div>

<div class="container">
        <div class="logo-mobile-wrap">
          <div id="logo">
            logo
          </div>
        </div>
        <div id="mobile-utility-nav">
        
        </div>
        <nav id="main-nav">
          <ul>
            <li class="first expanded nav-links top-level-wrapper"><a href="/en/technologies">Products</a></li>
<li class="expanded nav-links top-level-wrapper"><a href="/en/challenges">Solutions</a></li>
<li class="expanded nav-links top-level-wrapper"><a href="/en/services">Services &amp; support</a></li>
<li class="leaf nav-links top-level-wrapper"><a href="/en/resources">Resources</a></li>
<li class="last expanded nav-links top-level-wrapper"><a href="/en/about">Red Hat &amp; open source</a></li>
          </ul>
        </nav>
        <div id="to-top">
          <a class="btn_slideto" href="">
          </a>
        </div>
      </div>