title: How can I stop the Nav Bar from overlapping my content if it follows the margin that I set on the body?
body: <p>When I try adding margin to displace the content that is hidden under the Nav Bar, the bar moves with the body even though it is fixed.</p>
  
  <p>I researched a bit and other answers provide the same response to what I've tried such as <a href="https://stackoverflow.com/questions/28250261/html-positioning-overlap-between-navigation-bar-and-text">this</a></p>
  
  <p>I have tried plenty of things, mostly messing with margins and padding in the body and navbar but nothing seems to work as i'd like.</p>
  
  <p>Here is the CSS and HTML:</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>body {
    background-color: red;
    margin: 0;
    padding: 0;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: green;
    position: fixed;
    width: 100%;
  }
  li {
    float: left;
  }
  li a,
  .dropbtn {
    display: inline-block;
    text-align: center;
    padding: 20px 20px;
    text-decoration: none;
    line-height: 20px;
    color: #FFF1CF;
  }
  li a:hover,
  .dropdown:hover .dropbtn {
    background-color: #000;
  }
  li.dropdown {
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #000;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  }
  .dropdown-content a {
    color: #FFF1CF;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  .dropdown-content a:hover {
    background-color: green;
  }
  .dropdown:hover .dropdown-content {
    display: block;
    position: fixed;
  }
  .ul {
    position: fixed;
    top: 0;
    width: 100%;
  }
  .txt {
    display: inline-block;
    background-color: #3399FF;
    color: white;
    font-size: 20px;
    border: 5px solid gray;
    margin: 5px;
    width: 640px;
  }
  #textdiv {
    width: 1000px;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .sideborder1 {
    height: 600px;
    width: 400px;
    position: absolute;
    left: 0%;
  }
  .sideborder2 {
    height: 600px;
    width: 400px;
    position: absolute;
    right: 0%;
  }
  .centerimg {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    z-index: -1;
    left: 30%;
  }
  .dropdiv {
    padding-top: 10%;
  }
  .font1
  /*Regular Text*/
  
  {
    font-family: 'Times New Roman', cursive;
    font-size: 2em;
    text-align: center;
  }
  .font2
  /*Title*/
  
  {
    font-family: 'Times New Roman', cursive;
    font-size: 2em;
    color: #FFF1CF;
  }
  #font3
  /*SubTitle*/
  
  {
    font-family: 'Times New Roman', cursive;
    font-size: 1.2em;
  }
  .tryingtowork {
    /*background-image: url("RBS.png");
  background-position:0% 40%;*/
    width: 100%;
    overflow: hidden;
  }
  .tryingtowork2 {
    background-color: #AAA;
    width: 100%;
    overflow: hidden;
  }
  .tryingtowork3 {
    background-color: #CCC;
    width: 100%;
    overflow: hidden;
  }
  .tryingtowork4 {
    background-color: #BBB;
    width: 100%;
    overflow: hidden;
    margin-bottom: 100px;
  }
  .blogpost {
    background-color: #CCC;
    overflow: hidden;
    border-bottom: 2px dashed #FFF
  }
  #blogcontainer {
    width: 70%;
    margin: auto;
    background-color: FFF;
    border: 5px solid #FFF
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  
  &lt;header&gt;
    &lt;title&gt;RBS - Home&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
    &lt;link rel="icon" href="RBS.ico"&gt;
  &lt;/header&gt;
  
  &lt;body&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li style="padding-right:20%;padding-left:2.5%;letter-spacing:.3em;"&gt;
          &lt;a class="font2" href="index.html"&gt;RBS&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="font3" class="dropdown"&gt;
          &lt;a href="games.html" class="dropbtn"&gt;Games&lt;/a&gt;
          &lt;div class="dropdown-content"&gt;
            &lt;a href="#Evolution"&gt;Game?&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li id="font3" class="dropdown"&gt;
          &lt;a href="community.html" class="dropbtn"&gt;Community&lt;/a&gt;
          &lt;div class="dropdown-content"&gt;
            &lt;a href="Blog.html"&gt;Blog&lt;/a&gt;
            &lt;a href="#Facebook"&gt;Facebook&lt;/a&gt;
            &lt;a href="#Twitter"&gt;Twitter&lt;/a&gt;
            &lt;a href="#Reddit"&gt;Reddit&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li id="font3"&gt;
          &lt;a href="about.html"&gt;About Us&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;section class="tryingtowork"&gt;
      &lt;p class="font1"&gt;
        Hello (Info Goes Here)
        &lt;br&gt;This is our community page
        &lt;br&gt;Here is where we can display news and other things:
        &lt;br&gt;
        &lt;br&gt;
        &lt;br&gt;And here is other stuff
      &lt;/p&gt;
    &lt;/section&gt;
    &lt;section class="tryingtowork2"&gt;
      &lt;p class="font1"&gt;
        ShowCase Goes Here
      &lt;/p&gt;
    &lt;/section&gt;
    &lt;section class="tryingtowork3"&gt;
      &lt;p class="font1"&gt;
        News Goes Here
      &lt;/p&gt;
    &lt;/section&gt;
    &lt;section class="tryingtowork4"&gt;
      &lt;p class="font1"&gt;
        Social Media Goes Here
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;A
        &lt;br&gt;B
      &lt;/p&gt;
    &lt;/section &lt;/body&gt;
  
    &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and here is the <a href="https://jsfiddle.net/823r43gm/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Thank you all! I didn't realize I had two ULs, one a class and the other just affecting all UL so my top:0 was never being read. This helped lots!</p>