title: div inline-block (div overflows when there's content inside)
body: <p>I don't know if the title is describing it correctly but anyway;
  in this <a href="https://jsfiddle.net/omy1p00y/" rel="nofollow">jsfiddle</a> I have a div containing two inline-block divs ..they are aligned with no problem .. but whenever there's content in the yellow div this div strangely overflows .. <a href="https://jsfiddle.net/omy1p00y/3/" rel="nofollow">check this out</a>
  I want to know why is that and how to fix it </p>
  
  <p>html:</p>
  
  <pre><code>&lt;head&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  &lt;div class="header"&gt;
  &lt;div class="logo-container"&gt;
      &lt;p class="logo"&gt;&lt;span class="seven"&gt;7&lt;/span&gt;asobate&lt;/p&gt;
      &lt;span class="slogan"&gt;Web Developer and Data Scraper&lt;/span&gt;
    &lt;/div&gt;&lt;div class="header-nav-container"&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css :</p>
  
  <pre><code>*
  {
    margin:0;
  }
  .header
  {
    width:100%;
    height:65px;
    background-color:gray;
  
  }
  .logo-container
  {
  
    display:inline-block;
    position:relative;
    background-color:green;
    height:65px;
    width:22.5%;
    padding-left:1%;
  
  
  }
  .logo-container .logo
  {
    position:absolute;
   font-size:30px;
    font-family: 'Black Ops One';
  }
  .logo-container .logo .seven 
  {
    color:blue;
    font-size:40px;
  }
   .logo-container .slogan
  {
    position:absolute;
    margin-top:40px;
    font-size:12.5px;
    font-family:'Black Ops One';
  }
  .header-nav-container
  {
    margin-left:70px;
    display:inline-block;
    background-color:yellow;
    height:65px;
    width:10%;
  }
  </code></pre>
  
  <p>(psst .. do you think it's fully legal to address myself as data scraper ?)</p>