title: Automatic margins in top side nav bar?
body: <p>I noticed every time I try to make a nav bar I have a left and top margin of about 8px that is just there.. I have no idea where this came from as my css file is small and I do not have that code anywhere. I'm beginning to think it's some type of standard and perhaps I am doing it all wrong. How would I overcome this problem? I added a -8px margin to the left and top of the tool bar and it is now flush with the browser; however, now there is empty space if the user horizontally scrolls to the right.</p>
  <p><img src="https://i.stack.imgur.com/pmtd5.jpg" alt="Take a look at the margins on the top nav bar" /></p>
  <h2>CSS</h2>
  <pre><code>body {
  }
  
  .navbar-container {
  width: 100%;
  background-color: #252122;
  /*margin-left:-8px;
  margin-top:-8px;*/
  }
  
      .navbar-container table {
      width: auto;
      }
  
  
  .classifieds-container {
  overflow: hidden;
  z-index: -1;
  top: 40px;
  left: 0;
  right: 0;
  display: block;
  width: 960px;
  padding-bottom: 25px;
  background: #fff;
  box-shadow: 1px 0 7px;
  font: 11px &quot;Arial&quot;,sans-serif;
  color: #000;
  /*line-height: 59px;*/
  }
  
      .classifieds-container label {
      color: blue;
      }
  
          .classifieds-container label:hover {
          color: red;
          text-decoration: underline;
          }
  
      .classifieds-container table {
      width: 960px;
      }
  
      .classifieds-container .col {
      float: left;
      margin-left: 15px;
      }
  
  .col-one {
  margin-top: 60px;
  float: left;
  margin-left: 200px;
  max-width: 175px;
  text-wrap: normal;
  }
  
      .col-one h3 {
      text-align: center;
      }
  
  .row-splitter {
  border-bottom: solid;
  border-width: 1px;
  border-color: gray;
  margin-top: 5px;
  margin-bottom: 5px;
  }
  
  .classified-link-descriptor {
  color: gray;
  text-decoration: none;
  font: 11px &quot;Arial&quot;,sans-serif;
  margin-bottom: 5px;
  display: block;
  }
  
  nav {
  display: block;
  }
  
  .logo-header {
  height: 35px;
  width: auto;
  float: right;
  }  
  </code></pre>
  <h2>HTML</h2>
  <pre><code>&lt;body&gt;
   &lt;nav&gt;
      &lt;div id=&quot;Navigation&quot;&gt;
          &lt;div class=&quot;navbar-container&quot;&gt;
              &lt;table&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td colspan=&quot;2&quot;&gt;
  
                              &lt;img class=&quot;logo-header&quot; src=&quot;~/Content/logo_black_background.png&quot; /&gt;
  
                          &lt;/td&gt;
  
                          &lt;td colspan=&quot;6&quot;&gt;
                              &lt;div&gt;
                                  @(Html.Kendo().Menu()
    .Name(&quot;Menu&quot;)
    .Items(items =&gt;
    {
        items.Add()
            .Text(&quot;Home&quot;);
        items.Add()
            .Text(&quot;Classifieds&quot;)
            .Content(@&lt;text&gt;
                                  &lt;div class=&quot;classifieds-container&quot;&gt;
                                      &lt;div id=&quot;col1&quot; class=&quot;col&quot;&gt;
                                          &lt;div id=&quot;col1-row1&quot;&gt;
                                              &lt;h2&gt;Auto&lt;/h2&gt;
                                          &lt;/div&gt;
                                          &lt;div class=&quot;row-splitter&quot;&gt;
                                          &lt;/div&gt;
                                          &lt;div&gt;
                                              @*@Html.ActionLink(&quot;Custom Builds&quot;, &quot;Index&quot;, &quot;ResultsList&quot;, new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.Build }, new { @class = &quot;classified-link&quot; })*@
                                              &lt;label id=&quot;Custom-Builds&quot;&gt;Custom Builds&lt;/label&gt;
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;Modified vehicles ready to drive&lt;/div&gt;
                                              @*@Html.ActionLink(&quot;Shells&quot;, &quot;Index&quot;, &quot;ResultsList&quot;, new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.Shell }, new { @class = &quot;classified-link&quot; })*@
                                              &lt;label id=&quot;Shells&quot;&gt;Shells&lt;/label&gt;
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;Non-running vehicles for parts&lt;/div&gt;
                                              @*@Html.ActionLink(&quot;Stockers&quot;, &quot;Index&quot;, &quot;ResultsList&quot;, new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.Stock }, new { @class = &quot;classified-link&quot; })*@
                                              &lt;label id=&quot;Stockers&quot;&gt;Stockers&lt;/label&gt;
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;Stock vehicles ready to drive&lt;/div&gt;
                                              @* @Html.ActionLink(&quot;All Types&quot;, &quot;Index&quot;, &quot;ResultsList&quot;, new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.AllTypesOfVehicles }, new { @class = &quot;classified-link&quot; })*@
                                              &lt;label id=&quot;All-Types&quot;&gt;All Types&lt;/label&gt;
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;Browse all types of vehicles in one search&lt;/div&gt;
                                              @* @Html.ActionLink(&quot;By Year, Make, &amp; Model&quot;, &quot;VehiclesByMake&quot;, &quot;Browse&quot;, null, new { @class = &quot;classified-link&quot; })*@
                                              &lt;label id=&quot;YearMakeModel&quot;&gt;By Year, Make, &amp; Model&lt;/label&gt;
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;Search by specific year, make, and model&lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div id=&quot;col2&quot; class=&quot;col&quot;&gt;
                                          &lt;div id=&quot;col2-row1&quot;&gt;
                                              &lt;h2&gt;Parts&lt;/h2&gt;
                                          &lt;/div&gt;
                                          &lt;div class=&quot;row-splitter&quot;&gt;
                                          &lt;/div&gt;
                                          &lt;div class=&quot;auto-links&quot;&gt;
                                              &lt;label id=&quot;Browse-all-parts&quot;&gt;Browse all parts&lt;/label&gt;
                                              @*@Html.ActionLink(&quot;Browse all parts&quot;, &quot;Index&quot;, &quot;ResultsList&quot;, null, new { @class = &quot;classified-link&quot; })*@
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;Browse all parts with no discrimination!&lt;/div&gt;
                                              &lt;label id=&quot;Browse-by-vehicle-application&quot;&gt;Browse by vehicle application&lt;/label&gt;
                                              @*@Html.ActionLink(&quot;Browse by vehicle application&quot;, &quot;PerformancePartsByVehicle&quot;, &quot;Browse&quot;, null, new { @class = &quot;classified-link&quot; })*@
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;By year, make, and model&lt;/div&gt;
                                              @*@Html.ActionLink(&quot;Browse by part category&quot;, &quot;PerformancePartsByCategory&quot;, &quot;Browse&quot;, null, new { @class = &quot;classified-link&quot; })*@
                                              &lt;label id=&quot;Browse-by-part-category&quot;&gt;Browse by part category&lt;/label&gt;
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;By category (e.g. turbos, intake, engine builds, etc.)&lt;/div&gt;
                                              @*@Html.ActionLink(&quot;Browse by part manufacturer&quot;, &quot;PerformancePartsByManufacturerLetter&quot;, &quot;Browse&quot;, null, new { @class = &quot;classified-link&quot; })*@
                                              &lt;label id=&quot;Browse-by-part-manufacturer&quot;&gt;Browse by part manufacturer&lt;/label&gt;
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;By manufacturer (e.g. Blouch, Stance, K&amp;N, AEM, etc.)&lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div id=&quot;col3&quot; class=&quot;col&quot;&gt;
                                          &lt;div id=&quot;col3-row1&quot;&gt;
                                              &lt;h2&gt;Wheels&lt;/h2&gt;
                                          &lt;/div&gt;
                                          &lt;div class=&quot;row-splitter&quot;&gt;
                                          &lt;/div&gt;
                                          &lt;div class=&quot;auto-links&quot;&gt;
                                              @*@Html.ActionLink(&quot;Browse all wheels&quot;, &quot;Index&quot;, &quot;ResultsList&quot;, null, new { @class = &quot;classified-link&quot; })*@
                                              &lt;label id=&quot;Browse-all-wheels&quot;&gt;Browse all wheels&lt;/label&gt;
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;Browse all wheels with no discrimination!&lt;/div&gt;
                                              @*@Html.ActionLink(&quot;Browse by size&quot;, &quot;PerformancePartsByVehicle&quot;, &quot;Browse&quot;, null, new { @class = &quot;classified-link&quot; })*@
                                              &lt;label id=&quot;Browse-by-size&quot;&gt;Browse by size&lt;/label&gt;
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;15&quot;, 18&quot; x 11.5&quot;, 19&quot; x 12.5&quot; etc.&lt;/div&gt;
                                              @* @Html.ActionLink(&quot;Browse by manufacturer&quot;, &quot;PerformancePartsByCategory&quot;, &quot;Browse&quot;, null, new { @class = &quot;classified-link&quot; })*@
                                              &lt;label id=&quot;Browse-by-manufacturer&quot;&gt;Browse by manufacturer&lt;/label&gt;
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;By manufacturer (e.g. Volk, Ray's, Work, Enkei, etc.)&lt;/div&gt;
                                              @*@Html.ActionLink(&quot;Tires only&quot;, &quot;PerformancePartsByCategory&quot;, &quot;Browse&quot;, null, new { @class = &quot;classified-link&quot; })*@
                                              &lt;label id=&quot;Tires-only&quot;&gt;Tires only&lt;/label&gt;
                                              &lt;div class=&quot;classified-link-descriptor&quot;&gt;Tires only! No rims here!&lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;/text&gt;);
        items.Add()
            .Text(&quot;Search&quot;)
            .Items(children =&gt;
                {
                    children.Add().Text(&quot;Showroom&quot;);
                    children.Add().Text(&quot;JDM gear heads&quot;);
                });
  
        items.Add().Text(&quot;Discussions&quot;);
  
        //if (WebSecurity.IsAuthenticated)
        //{
        //    items.Add().Text(&quot;Account&quot;);
        //}
        //else
        //{
        //    items.Add().Text(&quot;Sign In&quot;);
        //    items.Add().Text(&quot;Register&quot;);
        //}
    }
  ))
                              &lt;/div&gt;
                          &lt;/td&gt;
  
                          &lt;td colspan=&quot;2&quot;&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div&gt;
      @RenderBody()
  &lt;/div&gt;
  </code></pre>