title: Space on the right end of menu bar
body: <p>I'm new to HTML and CSS, and this is my first project.</p>
  
  <p>I have this "space" near the end of the navbar and it forces the next link to break into a new line. Also, I cannot find a solution that removes the gap between the background image and the navbar no matter the screen size.</p>
  
  <p>I'm not able to pinpoint what is causing these problems, and I'm sure it's just some petty mistake.</p>
  
  <p><a href="http://prntscr.com/g0xi6z" rel="nofollow noreferrer">navbar http://prntscr.com/g0xi6z</a></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>.topnavhome nav {
    position: relative;
    display: block;
    margin: 0px;
    background-color: #333333;
    overflow: hidden;
    text-align: justify;
    font-size: 0px;
    min-width: 500px;
    width: 100%;
  }
  
  .topnavhome:after  {
    content: '';
    display: inline-block;
    width: 100%;
  }
  
  .topnavhome .li {
    display: inline-block;
  }
  
  .topnavhome nav li a {
    float: left;
    display: block;
    padding: 12px;
    width: 180px;
    margin-bottom: -1.5px;
    color: #f2f2f2;
    border-left: solid 3px #333333;
    text-align: center;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    -webkit-transition: background .3s linear;
     -moz-transition: background  .3s linear;
     -ms-transition: background .3s linear;
     -o-transition: background .3s linear;
     transition: background .3s linear;
  }
  
  .topnavhome nav a:hover {
    background-color: #046A78;
    color: white;
    border-left: solid 3px #79CBD6;
    -moz-transition: background-color 0.01s;
    -webkit-transition: background-color 0.01s;
    -o-transition: background-color 0.01s;
    transition: background-color 0.01s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="topnavhome" id="myTopnav"&gt;
      &lt;nav&gt;
      &lt;li&gt;&lt;a href="../html/home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="../html/networksecurity.html"&gt;Network Security&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../html/passwords.html"&gt;Passwords&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../html/firewalls.html"&gt;Firewalls&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../html/encryption.html"&gt;Encryption&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../html/biometric.html"&gt;Biometric Devices&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../html/references.html"&gt;References&lt;/a&gt;&lt;/li&gt;
     &lt;/nav&gt;
    &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>