title: Remove right margin off one element in HTML/CSS List Navigation
body: <p>I am trying to get the gray buttons at the top of this page to all fit across the top (in line with the body), rather than on two lines: <a href="http://www.nbm.org/test/nbm-online-drafts/dropdown-testing.html" rel="nofollow">http://www.nbm.org/test/nbm-online-drafts/dropdown-testing.html</a> </p>
  
  <p>I have it set up as a list: </p>
  
  <pre><code>&lt;nav id="main-nav"&gt;
  &lt;ul id="nav-primary"&gt;
  &lt;li&gt;&lt;a href="http://www.nbm.org/plan-visit/"&gt;&lt;img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/planyourvisit.jpg" alt="Plan Your Visit" width="109" height="48"&gt;&lt;/a&gt;
          &lt;ul class="subnav"&gt;
              &lt;li&gt;&lt;a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=2041&amp;JServSessionIdr004=gkto4vnlz1.app213a" style="padding-top: 12px; padding-bottom:12px;"&gt;Buy Tickets&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/plan-visit/hours_amenities/"&gt;Hours &amp; Admission&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/plan-visit/accessibility-directions/"&gt;Accessibility &amp; Directions&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/programs-lectures/tours/" style="padding-top: 12px; padding-bottom:12px;"&gt;Tours&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.nbm.org/exhibitions-collections/"&gt;&lt;img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/exhibitionscollections.jpg" alt="Exhibitions / Collections" width="109" height="48"&gt;&lt;/a&gt;
  
          &lt;ul class="subnav"&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/exhibitions-collections/current-exhibitions.html"&gt;Current Exhibitions&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/exhibitions-collections/upcoming-exhibitions.html"&gt;Upcoming Exhibitions&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=2041&amp;JServSessionIdr004=gkto4vnlz1.app213a" style="padding-top: 12px; padding-bottom:12px;"&gt;Buy Tickets&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/exhibitions-collections/collections/" style="padding-top: 12px; padding-bottom:12px;"&gt;Collections&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.nbm.org/programs-lectures/"&gt;&lt;img src="  http://www.nbm.org/assets/images/homepage/2011/nav-sprites/adultprogs.jpg" alt="Adult Programs" width="109" height="48"&gt;&lt;/a&gt;
  
          &lt;ul class="subnav"&gt;
              &lt;li&gt;&lt;a href="http://go.nbm.org/site/Calendar/1810746008?view=MonthGrid&amp;Day"&gt;Upcoming Programs&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/programs-lectures/series/spotlight-on-design-1.html"&gt;Spotlight on Design&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/about-us/multimedia/" style="padding-top: 12px; padding-bottom:12px;"&gt;Watch / Listen&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/programs-lectures/continuing-education-credits.html"&gt;Continuing Education Credits&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.nbm.org/families-kids/"&gt;&lt;img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/familiesteens.jpg" alt="Families / Teens" width="109" height="48"&gt;&lt;/a&gt;
  
          &lt;ul class="subnav"&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/families-kids/festivals/" style="padding-top: 12px; padding-bottom:12px;"&gt;Festivals&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/families-kids/everyday-activities/"&gt;Everyday Activities&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/families-kids/teens-young-adults/"&gt;Teens &amp; Young Adults&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/families-kids/summer-camp.html" style="padding-top: 12px; padding-bottom:12px;"&gt;Summer Camp&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/families-kids/scouts-and-youth-groups/"&gt;Scouts &amp; Youth Groups&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/families-kids/birthday-parties/" style="padding-top: 12px; padding-bottom:12px;"&gt;Birthday Parties&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.nbm.org/schools-educators/"&gt;&lt;img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/schoolseducators.jpg" alt="Schools / Educators" width="109" height="48"&gt;&lt;/a&gt;
  
          &lt;ul class="subnav"&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/schools-educators/educators/" style="padding-top: 12px; padding-bottom:12px;"&gt;For Educators&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/families-kids/teens-young-adults/"&gt;For Teens &amp; Young Adults&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/schools-educators/school-visit/" style="padding-top: 12px; padding-bottom:12px;"&gt;Plan a School Visit&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.nbm.org/support-us/"&gt;&lt;img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/joindonate.jpg" alt="Join / Donate" width="109" height="48"&gt;&lt;/a&gt;
  
          &lt;ul class="subnav"&gt;
              &lt;li&gt;&lt;a href="https://secure2.convio.net/nbm/site/Donation2?df_id=2420&amp;2420.donation=form1&amp;JServSessionIdr004=gkto4vnlz1.app213a" style="padding-top: 12px; padding-bottom:12px;"&gt;Donate Now&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/support-us/membership/" style="padding-top: 12px; padding-bottom:12px;"&gt;Membership&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/support-us/sponsorships/" style="padding-top: 12px; padding-bottom:12px;"&gt;Corporate Giving&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/support-us/awards_honors/" style="padding-top: 12px; padding-bottom:12px;"&gt;Awards &amp; Honors&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/support-us/volunteer/" style="padding-top: 12px; padding-bottom:12px;"&gt;Volunteer&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161"&gt;&lt;img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/shop.jpg" alt="Shop" width="109" height="48"&gt;&lt;/a&gt;
  
          &lt;ul class="subnav"&gt;
              &lt;li&gt;&lt;a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&amp;VIEW_DEFAULT=true&amp;FOLDER=1035&amp;TYPE=&amp;NAME=" style="padding-top: 12px; padding-bottom:12px;"&gt;Books&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&amp;VIEW_DEFAULT=true&amp;FOLDER=1036&amp;TYPE=&amp;NAME=" style="padding-top: 12px; padding-bottom:12px;"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&amp;VIEW_DEFAULT=true&amp;FOLDER=1033&amp;TYPE=&amp;NAME=" style="padding-top: 12px; padding-bottom:12px;"&gt;Toys&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&amp;VIEW_DEFAULT=true&amp;FOLDER=1034&amp;TYPE=&amp;NAME=" style="padding-top: 12px; padding-bottom:12px;"&gt;Museum&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&amp;VIEW_DEFAULT=true&amp;FOLDER=2060&amp;TYPE=&amp;NAME=" style="padding-top: 12px; padding-bottom:12px;"&gt;Stationery&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&amp;VIEW_DEFAULT=true&amp;FOLDER=1040&amp;TYPE=&amp;NAME=" style="padding-top: 12px; padding-bottom:12px;"&gt;Fashion&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&amp;VIEW_DEFAULT=true&amp;FOLDER=2070&amp;TYPE=&amp;NAME=" style="padding-top: 12px; padding-bottom:12px;"&gt;Design&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.nbm.org/about-us/"&gt;&lt;img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/aboutus.jpg" alt="About Us" width="109" height="48"&gt;&lt;/a&gt;
  
          &lt;ul class="subnav"&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/about-us/about-the-museum/"&gt;About the Museum&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/about-us/national-building-museum-online/" style="padding-top: 12px; padding-bottom:12px;"&gt;E-newsletters&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/about-us/press-room/" style="padding-top: 12px; padding-bottom:12px;"&gt;Press Room&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/about-us/management-staff/"&gt;Staff &amp; Governance&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="http://www.nbm.org/about-us/employment_internships/"&gt;Employment &amp; Internships&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>
     </p>
  
  <p>I want to keep the li right margin at 4px, but that pushes the "About Us" button to a second line. Changing the li right margin to 3px is too little and the buttons do not line up with the body on the right.</p>
  
  <p>CSS: </p>
  
  <pre><code>#main-nav {
      background: none repeat scroll 0 0 white;
      height: 53px;
      left: 0;
      position: relative;
      top: 128px;
      width: 100%;
      z-index: 11;
  }
  #main-nav .subnav {
      background: none repeat scroll 0 0 #D7D6D4;
      border: 0 solid #D4D5D6;
      display: none;
      left: 0;
      list-style-type: none;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 49px;
      width: 109px;
      z-index: 11;
  }
  #main-nav .subnav li {
      border-bottom: 1px solid #EEEEEE;
      display: block;
      margin: 0;
  }
  #main-nav .subnav li a {
      color: #000000;
      font-size: 11px;
      height: 18px;
      padding: 6px 4px 19px;
      width: 101px;
  }
  #main-nav .subnav li a:hover {
      background: none repeat scroll 0 0 #BFBEBA;
      width: 101px;
  }
  #nav-primary {
      float: left;
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  #nav-primary li {
      float: left;
      margin-right: 4px;
      position: relative;
  }
  #nav-primary li a {
      color: #000000;
      float: left;
      font-size: 13px;
      font-weight: bold;
      height: 48px;
      line-height: 16px;
      text-align: center;
      text-decoration: none;
      width: 109px;
  }
  #nav-primary li a:hover {
      text-decoration: none;
  }
  #nav-primary li:hover .subnav {
      display: block;
  }
  </code></pre>
  
  <p>Is it possible to remove the right margin on the last li element? Or to hide it?
  Any ideas are much appreciated!</p>