title: HTML width 100% goes outside the page
body: <p>I'm pretty newbie with HTML and CSS. So, I've got a problem with the <code>width</code> of 100%. It appears to go beyond the borders of the browser. Please take a look at the example below! Should I decrease the <code>width</code> per cents a little or is there some flaws in my code that could cause this?</p>
  
  <p>I found some other posts here about the width 100%, but neither of them didn't really help me. Here's the example I made: <a href="http://jsfiddle.net/gj53jbz9/" rel="nofollow noreferrer">http://jsfiddle.net/gj53jbz9/</a></p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body{
                font-size: 15px;
                margin: 0px;
                background-color: lightgrey;  }
  
              #header{
                padding: 30px;
                width: 100%;
                height: 250px;
                background-color: grey;   }
  
              #name{
                padding: 5px;
                font-size: 25px;
                float: left;  }
  
  
              #navbar{
                float: right;
                text-align: right;    }
  
              #navbar a{
                background-color: black;
                display: inline-block;
                width: 120px;
                text-align: center;
                padding: 10px 0px;
                text-decoration: none;
                color: lightgrey; }
  
              #title{
                clear: both;
                text-align: center;
                padding-top: 100px;
                font-size: 45px;  }
  
              #content{
                text-align: center;
                width: 80%;
                margin: 0px auto;  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;div id=header&gt;
              &lt;div id=name&gt;Name&lt;/div&gt;
              &lt;div id=navbar&gt;
                  &lt;a href="page1.html"&gt;Link1&lt;/a&gt;
                  &lt;a href="page2.html"&gt;Link2&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id=title&gt;Insert title here&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id=content&gt;
              &lt;h3&gt;Age of aggression&lt;/h3&gt;
              &lt;p&gt;We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.&lt;/p&gt;
              &lt;p&gt;Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!&lt;/p&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>