title: How to Align Static-Positioned Nav Bars to the Top-Left Corner?
body: <p>For the past few days, I've been trying to create a nav bar that stays at the top-left corner, and all of the advice that I've found is either someone accidentally adding to the <code>margin</code> or needs to use <code>position:fixed</code>. How do I align it to the top left corner if I don't want it to be fixed?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li.navi a {
      text-decoration:none;
      color:white;
      padding:.3125em;        /* Changes the padding to make the hover effect bigger */
      margin-right:1.2em;
  }
  
  ul.navi {
      display:block;
      background-color:black;
      position:static;
      top:0;
      left:0;
  }
  
  li.navi {
      display:inline;
      float:right;            /* Prevents the nav bar from glitching out */
      font-size:1.25em;
      text-align:center;
      font-family:Rubik;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class = "navi"&gt;
    &lt;li class = "navi"&gt;
      &lt;a href = "https://www.youtube.com/" target = "_blank"&gt;
        Item
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class = "navi"&gt;
      &lt;a href = "https://www.youtube.com/" target = "_blank"&gt;
        Item
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class = "navi"&gt;
      &lt;a href = "https://www.youtube.com/" target = "_blank"&gt;
        Item
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class = "navi"&gt;
      &lt;a href = "https://www.youtube.com/" target = "_blank"&gt;
        Item
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class = "titleLi"&gt;
      Item
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>