title: The clickable area for my link is too large
body: <p>I have an <code>&lt;img&gt;</code> logo that is wrapped inside a link, and the link is wrapped in a <code>&lt;div&gt;</code>.</p>
  
  <p>My code below results in the clickable area for my link to extend 100% horizontally to both edges of the viewport.</p>
  
  <p>How can I make the clickable area for my link to be the size of my logo?</p>
  
  <ul>
  <li><a href="http://jsfiddle.net/wLbo6mjr/2/" rel="nofollow">jsFiddle</a></li>
  </ul>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="logo-container"&gt;
      &lt;div id="logo"&gt;
      &lt;a href="dashboard.php"&gt;&lt;img src="http://placehold.it/350x150" /&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#logo-container{
      width:100%;
      float:left;
      height:auto;
      margin:0 auto 0 auto;
      background:#ECECEA;
  }
  
  #logo{
      margin:0 auto;
      height:auto;
  }
  
  #logo img {
      display:block;
      margin:6px auto 10px auto;
  }
  
  #logo img{
      width:330px;
      height:auto;
  }
  </code></pre>