title: HTML: Why is element taking up so much width?
body: <p>I have been working on a custom wordpress theme, this is part of a schoolproject where we're supposed to redesign a homepage for an association (in my case a theater group).</p>
  
  <p>I've customized the wordpress menu to add images for the four pages. However, the <code>&lt;nav&gt;</code> element that these images are located in is taking more width than expected, even though I'm using <code>width: auto</code> in the CSS. Because of this I have repositioned the <code>&lt;nav&gt;</code> using <code>margin-right: -133px;</code> which I feel shouldn't be the way to solve this.</p>
  
  <p>The HTML for the upper banner is: (with a whole bunch of commented code removed)</p>
  
  <pre><code>&lt;header role="banner" id="branding"&gt;
      &lt;a href="http://dev.zomis.net/talat/"&gt;
          &lt;img alt="" src="http://dev.zomis.net/talat/wp-content/themes/talat/talat-logo.png" id="header_logotype"&gt;
      &lt;/a&gt;
      &lt;nav role="navigation" id="access"&gt;
          &lt;a href="http://dev.zomis.net/talat/forening"&gt;
              &lt;img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_forening_gray.jpg" id="menu_image_forening" class="menu_image"&gt;
          &lt;/a&gt;
          &lt;a href="http://dev.zomis.net/talat/scen"&gt;
              &lt;img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_scen.jpg" id="menu_image_scen" class="menu_image"&gt;
          &lt;/a&gt;
          &lt;a href="http://dev.zomis.net/talat/film"&gt;
              &lt;img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_film_gray.jpg" id="menu_image_film" class="menu_image"&gt;
          &lt;/a&gt;
          &lt;a href="http://dev.zomis.net/talat/natverk"&gt;
              &lt;img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_natverk_gray.jpg" id="menu_image_natverk" class="menu_image"&gt;
          &lt;/a&gt;
          &lt;div class="menu-talat-container"&gt;&lt;ul class="menu" id="menu-talat"&gt;&lt;/ul&gt;&lt;/div&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>To easier see the problem, I've marked the whole <code>header</code> element with red color, and the <code>nav</code> with yellow.</p>
  
  <p>I have been using Firebug a lot to play around and see what is causing this but I can't figure it out. I've been suspecting the empty <code>&lt;div class="menu-talat-container"&gt;</code> within the <code>&lt;header&gt;</code> to be the cause of this but I have been removing that part many times with Firebug and having seen no difference.</p>
  
  <p>The page can be seen at: <a href="http://dev.zomis.net/talat/scen" rel="nofollow noreferrer">http://dev.zomis.net/talat/scen</a></p>
  
  <p>An image of how it looks and the part I don't understand marked with the text "Why is this yellow part sticking out to the right?":<img src="https://i.stack.imgur.com/TjOva.png" alt="Why is this yellow part sticking out to the right?"></p>
  
  <p>When removing the <code>margin-right</code> property the question becomes instead "Why is there no image here?":
  <img src="https://i.stack.imgur.com/1yquH.png" alt="Why is there no image in the marked area?"></p>