title: Fixed navbar without breaking flexbox
body: <p>Adding <code>position: fixed;</code> to the navbar breaks <code>margin-left: auto;</code>  for the navbar menu icon:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Resets */
  
   :root {
    --pblack: #1E293B;
    --pyellow: #FFE934;
    --pwhite: white;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background: var(--pblack);
    color: var(--pwhite);
    font-family: raleway;
  }
  
  a {
    color: white;
    text-decoration: none;
  }
  
  
  /* Resets end */
  
  
  /* Styling starts */
  
  .logo {
    width: 32px;
    margin-right: auto;
  }
  
  .logo-type {
    display: none;
  }
  
  .container {
    margin: 1rem;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 90vh;
  }
  
  
  /* .nav-holder { position: fixed;
  } */
  
  .navbar {
    position: fixed;
    background: transparent;
    display: flex;
    align-items: center;
    z-index: 999;
  }
  
  .nav-menu {
    position: relative;
    background: var(--pyellow);
    width: 1.5rem;
    height: 2px;
    margin-left: auto;
  }
  
  .nav-menu::before {
    content: " ";
    position: absolute;
    top: -7px;
    right: 0;
    background: var(--pyellow);
    width: .5rem;
    height: 2px;
  }
  
  .nav-menu::after {
    content: " ";
    position: absolute;
    top: 7px;
    right: 0;
    background: var(--pyellow);
    width: 1rem;
    height: 2px;
  }
  
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border: 2px solid red; */
    text-align: center;
  }
  
  .greeting {
    font-size: 5rem;
    margin-bottom: 0;
  }
  
  .hero-name {
    font-size: 1.5rem;
  }
  
  .hero-anim {
    position: relative;
    margin: 6rem;
    /* border: 2px solid red; */
    width: 60%;
    /* height: 100px; */
  }
  
  .h-love {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .x-anim {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--pyellow);
    width: 2px;
    height: 1rem;
    transform: rotate(45deg);
  }
  
  .x-anim::after {
    content: "";
    display: inline-block;
    background: var(--pyellow);
    width: 2px;
    height: 1rem;
    transform: rotate(90deg);
  }
  
  .h-creating {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 2rem;
    margin: 0;
    color: var(--pyellow);
  }
  
  .h-amazing {
    position: absolute;
    top: 65px;
    left: 45px;
  }
  
  .dash-anim {
    position: absolute;
    top: 75px;
    left: 0px;
    width: 1.5rem;
    height: 2px;
    background: var(--pyellow);
  }
  
  .h-details {
    margin-left: 3rem;
    margin-right: 3rem;
    margin-top: 10rem;
  }
  
  .know-more-btn {
    position: relative;
    border: 1px solid var(--pyellow);
    border-radius: 50px;
    padding: .5rem 2.5rem .5rem 1rem;
    width: max-content;
    display: flex;
    align-items: center;
  }
  
  .btn-arrow {
    position: absolute;
    right: 2px;
    font-size: 2rem;
  }
  
  .sect2 {
    background-color: #FFE934;
    width: 100%;
    height: 100vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="nav-holder"&gt;
  
    &lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;nav class="navbar"&gt;
        &lt;img src="/img/Mitcho Icon black yellow.png" alt="logo" class="logo"&gt; &lt;span class="logo-type"&gt;Mitcho&lt;/span&gt;
        &lt;div class="nav-menu"&gt;&lt;/div&gt;
      &lt;/nav&gt;
      &lt;main class="main-con"&gt;
        &lt;div class="hero"&gt;
          &lt;h1 class="greeting"&gt;Hello!&lt;/h1&gt;
          &lt;span class="hero-name"&gt;
                      I'm Mitchell Orutu,
                  &lt;/span&gt;
          &lt;div class="hero-anim"&gt;
            &lt;span class="h-love"&gt;I Love&lt;/span&gt;
            &lt;div class="x-anim"&gt;&lt;/div&gt;
            &lt;span class="h-creating"&gt;Creating&lt;/span&gt;
            &lt;div class="dash-anim"&gt;&lt;/div&gt;
            &lt;span class="h-amazing"&gt;Amazing Experiences&lt;/span&gt;
          &lt;/div&gt;
          &lt;p class="h-details"&gt;A multidisciplinary designer and frontend developer. I'm obsessed with creating amazing experiences and have fun while doing it.&lt;/p&gt;
          &lt;a href="#" class="know-more-btn"&gt;
            &lt;span class="know-more-text"&gt;Know More&lt;/span&gt;
            &lt;i class='bx bxs-chevron-right-circle btn-arrow' style='color:#ffffff'&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>