title: Full Width Navigation Bar - CSS
body: <p>Right now my website looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/2kIk6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2kIk6.png" alt="example1"></a>
  </p>
  
  <p>But I would like it to look like so:</p>
  
  <p><a href="https://i.stack.imgur.com/clnSX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/clnSX.png" alt="example2"></a>
  </p>
  
  <p>Obviously I do not want the text like that. It was a byproduct of stretching.</p>
  
  <p>CSS:</p>
  
  <pre><code>@charset "utf-8";
     /* CSS Document */
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
     }
  
      li {
        float: left;
         }
  
     a.Nav_Links:link, a.Nav_Links:visited {
    display: block;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    }
  
    a.Nav_Links:hover, a.Nav_Links:active {
    background-color: #7A991A;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;!doctype html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
         &lt;title&gt;My Name&lt;/title&gt;
      &lt;link href="Horizontal_Nav_Bar.css" rel="stylesheet" type="text/css"&gt;
    &lt;/head&gt;
     &lt;body style="background:white"&gt;
       &lt;div class="Banner" id="banner"&gt;
       &lt;h1 style="text-align:center; color:red; font-size:5em"&gt; My Name&lt;/h1&gt;
       &lt;/div&gt;
  
  
       &lt;div class="Nav_Bar"&gt;
        &lt;ul&gt;  &lt;!-- Fix links # --&gt;
          &lt;li&gt;&lt;a  class="Nav_Links" href="#home"&gt;About Me&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a  class="Nav_Links" href="#news"&gt;LinkedIn&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a  class="Nav_Links" href="#contact"&gt;Research&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a  class="Nav_Links" href="#about"&gt;Pictures&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;!-- About Me, Link to Linked in, Research Projects, Resume, etc Pictures   --&gt;
  
         &lt;/div&gt;
  
  
     &lt;/body&gt;
     &lt;/html&gt;
  </code></pre>
  
  <p>Also, feel free to critique my code. </p>