title: Where is this height coming from? Web inspector doesn't show?
body: <p>If you take a look at the header, i have a phone number and an email on the right side. Now for some reason the two have this space in-between them and i have absolutely no idea where this space is coming from?</p>
  
  <p>I have no padding or height setting for that and the web inspector is just not showing it for me.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;www.WebDesignGuy.com || Professional Website Design and Website Development Services&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/animate.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;header&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-6" id="logo_container"&gt;
  
                  &lt;img src="img/logo.png" id="top_logo"&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-sm-6" id="cta_header_box"&gt;
  
                  &lt;div id="telephone"&gt;
                      &lt;img src="img/telephone_icon.png"&gt;
                      &lt;p&gt;085 816 2252&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div id="email"&gt;
                      &lt;img src="img/email_icon.png"&gt;
                      &lt;p&gt;info@webdesignguy.com&lt;/p&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;nav&gt;
      &lt;div class="container"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
  
  &lt;script type="text/javascript" src="js/jQuery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* {
    margin: 0;
    font-family: source sans pro;
  }
  
  html {
    height: 100%;
    overflow: hidden;
  }
  
  body {
    height: 100%;
    overflow: hidden;
  }
  
  /******* HEADER ****************** */
  header {
    background-color: #057bad;
    padding-bottom: 10px;
  }
  header p {
    color: white;
  }
  header #telephone {
    margin-top: 10px;
    font-size: 31px;
    font-weight: 400;
    text-align: right;
  }
  header #telephone p {
    display: inline;
  }
  header #telephone img {
    position: relative;
    bottom: 5px;
    margin-right: 5px;
  }
  header #email {
    font-size: 16px;
    text-align: center;
    text-align: right;
  }
  header #email p {
    display: inline;
  }
  header #email img {
    position: relative;
    left: 3px;
    bottom: 3px;
    margin-right: 10px;
  }
  
  #top_logo {
    margin-top: 20px;
  }
  
  #cta_header_box {
    text-align: right;
  }
  
  /******* HEADER ****************** */
  nav {
    background-color: #036994;
    padding: 5px 0;
  }
  nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  nav li {
    display: inline;
  }
  nav li a {
    color: white;
    text-decoration: none;
    margin-right: 30px;
    font-size: 1.2em;
  }
  nav li ahover {
    text-decoration: none;
    color: #057bad;
  }
  </code></pre>