title: float:left Not Working - Text Disappears
body: <p>I'm making a website. My float element is not working as it should. But that's not the only thing, when I add the float: left element the navbar disappear. I need my navbar to be floated to the left. </p>
  
  <p>HTML Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    body {
        font-family: 'Open-sans', sans-serif, Helvetica;
        text-align: center;
        box-sizing: border-box;
      }
      
      #main_navbar {
        text-align: center;
        margin: 0 auto;
        float: right;
        position: absolute;
        top: 35px;
        right: 20px;
      }
      
      #main_navbar li {
        list-style-type: none;
        display: inline-block;
        min-width: 5em;
      }
      
      #main_navbar li a {
        text-decoration: none;
        color: white;
        font-size: 1.2em;
        text-align: center;
        overflow: hidden;
         color: #68cedd;
      }
      
      .dropdown {
        position: relative;
      }
      
      .dropdown:active {
        color: #32673f;
      }
      
      .dropdown-content {
        display: none;
        min-width: 200px;
        right: 50%;
        transform: translate(50%,0);
        position: absolute;
        padding: 10px 0;
        border-radius: 5px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      }
      
      .dropdown-content a {
        display: block;
        font-weight: normal;
      }
      
      .dropdown:hover .dropdown-content {
        display: block;
        background-color: #f9f9f9;
      }
      
      #image_symbol {
        width: 10em;
        margin: 0 auto;
      }
      
      header {
        height: 95px;
        width: 100%;
        padding-right: 30px;
        margin-left: -20px;
        margin-top: -20px;
        padding-top: 20px;
      }
      
      #main_navbar li a.active, ul#main_navbar li a:hover {
        color: #32673f;
      }
      
      #navbar {
        position: relative;
        float: left;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
       &lt;head&gt;
        &lt;meta  charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;title&gt;My Cycle - Home&lt;/title&gt;
        &lt;link rel="stylesheet" href="css/style.css" type="text/css" /&gt;
       &lt;/head&gt;
       &lt;body&gt;
        &lt;header&gt;
         &lt;div id="heading"&gt;
          &lt;img src="http://i.imgsafe.org/79ba3b5.png" id="image_symbol"&gt;&lt;/img&gt;
          &lt;h2 style="position: relative; top: -100px; left: 120px"&gt;MY CYCLE&lt;/h2&gt;
         &lt;/div&gt;
         &lt;div id="navbar"&gt;
          &lt;ul id="main_navbar"&gt;
              &lt;li&gt;
               &lt;a href="#" style="z-index: -1" class="active"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="dropdown"&gt;
                 &lt;a class="dropbtn" style="z-index: -1"&gt;Rent&lt;/a&gt;
                 &lt;div class="dropdown-content"&gt;
                   &lt;a href="rental/mountain_bikes.html"&gt;Mountain Bikes&lt;/a&gt;
                   &lt;a href="rental/hybrid_bikes.html"&gt;Hybrid Bikes&lt;/a&gt;
                   &lt;a href="rental/road_bikes.html"&gt;Road Bikes&lt;/a&gt;
                   &lt;a href="rental/city_bikes.html"&gt;City Bikes&lt;/a&gt;
                 &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href="faq.html" style="z-index: -1"&gt;FAQ's&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;a href="about.html" style="z-index: -1"&gt;About&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
           &lt;/div&gt;
        &lt;/header&gt;
        &lt;section&gt;
         
        &lt;/section&gt;
        &lt;footer&gt;
         
        &lt;/footer&gt;
       &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you in advance.</p>