title: How To Place Two Images Side By Side In Header
body: <p>I need to place two images next to each other in the header. One is a logo and one is a banner image - the logo is a link back to the home page. The header has the background-color red, so once the banner is added, most of the header will be hidden except for a thin line of red at the bottom. I tried this: </p>
  
  <p>CSS:</p>
  
  <pre><code>div.container {
    display:inline-block;
  } 
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt;
  &lt;div class="container"&gt;
  &lt;a href="index.html&gt;&lt;img class="logo" src="images/logo.jpg" height="110"
  width="200"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
  &lt;img class="banner" src="images/banner.jpg" height="110" width="800"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it did not work. Here is a screenshot showing the web page. The Banner should go just to the right of the logo "Sean's"<a href="https://i.stack.imgur.com/ZRjSn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZRjSn.jpg" alt="enter image description here"></a></p>
  
  <p>After trying this: </p>
  
  <pre><code>div.container {
  display:inline-block;
  Width:auto!important;
  } 
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/8s5kD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8s5kD.jpg" alt="enter image description here"></a></p>
  
  <p>Link to full HTML, CSS, and Javascript: <a href="http://jsfiddle.net/HappyHands31/kzbvLheq/" rel="nofollow noreferrer">http://jsfiddle.net/HappyHands31/kzbvLheq/</a></p>