title: Unwanted horizontal scroll bar
body: <p>I'm having a bit of a problem. For some reason a horizontal scroll bar keeps appearing from my code. I've tried everything but I can't seem to remove it. The following link is a live preview of the code.</p>
  
  <p><a href="http://jsfiddle.net/y5x7V/" rel="noreferrer">http://jsfiddle.net/y5x7V/</a></p>
  
  <p>HTML</p>
  
  <pre><code> &lt;body&gt;
   &lt;section class="contain"&gt;
   &lt;div id="section-nav" class="section-nav"&gt;
   &lt;div class="top"&gt;
   &lt;ul&gt;
   &lt;li class="logo"&gt;&lt;a href="#"&gt;Magna Contra&lt;/a&gt;&lt;/li&gt;
   &lt;li class="active"&gt;&lt;a href="#"&gt;Blog With Us&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Compxta&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Laurie&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;SUBTITLESOFLIFE&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/section&gt;
  
   &lt;div class="bg"&gt;
  
   &lt;h1&gt;SUBTITLESOFLIFE&lt;/h1&gt;
   &lt;/div&gt;
  
   &lt;ul class="check"&gt;
   &lt;li class="bold"&gt;&lt;a href="#"&gt;Hot Trends&lt;/a&gt;&lt;/li&gt;
   &lt;li class="topic"&gt;&lt;a href="#"&gt;Daft Punk&lt;/a&gt;&lt;/li&gt;
   &lt;li class="topic"&gt;&lt;a href="#"&gt;#bbcqt&lt;/a&gt;&lt;/li&gt;
   &lt;li class="topic"&gt;&lt;a href="#"&gt;Petite Noir - Major&lt;/a&gt;&lt;/li&gt;
   &lt;li class="topic"&gt;&lt;a href="#"&gt;Alt J Album Teaser&lt;/a&gt;&lt;/li&gt;
   &lt;li class="topic"&gt;&lt;a href="#"&gt;Materialistic Happine$$&lt;/a&gt;&lt;/li&gt;
   &lt;li class="topic"&gt;&lt;a href="#"&gt;WOLF&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  
   &lt;div class="contar"&gt;
    Lorem Dosi
   &lt;/div&gt;
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul
  {
  list-style-type:none;
  margin:0;
  padding:0;
  text-align: center;
  }
  
  .check{
  list-style-type:none;
  margin:0;
  padding:0;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  display: inline-block;
  
  }
  
  
  
  
  ::selection{background:red;color:red;}::-moz-selection{background:red;color:red;}
  
  li
  {
  display: inline;
  padding:15px;
  text-align: center;
  margin:auto 0;
  position: relative;
  }
  
  li a{
    text-decoration: none;
    color:#bbbbbb;
    font-family: "proxima-nova",sans-serif;
    text-transform: uppercase;
    text-align: center;
    font-size: 0.78em;
  letter-spacing: .2em}
  
  hr{
    color:#dfe0db;
      border: 0;
  background-color: #dfe0db;
  height: 1px;
  }
  
  .bold{
    display: inline;
  }
  
  .bold a{
    color:#e94378;
  }
  .topic{
    display: inline;
  padding:8px;
  text-align: center;
  margin:auto 0;
  position: relative;
  
  }
  
  .topic a{
  -webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none}
  
  .topic a:hover{
    color:#e94378;text-decoration:none}
  
  }
  
  .logo a{
    color:#bbb;
    font-size: 0.78em;
    text-decoration: none;
    text-transform: uppercase;
  }
  
  
  img#hv {
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE6-9 */
      -webkit-filter: grayscale(1); /* Google Chrome &amp; Safari 6+ */
  }
  
  img#hv:hover {
      filter: none;
      -webkit-filter: grayscale(0);
  }
  .image {position: relative; text-align: center;width:100%;height:75%;}
  
  .image span {position: absolute; line-height: 20px; display: block; top: 50%; 
      margin-top: -10px; width: 100%; color: white;font-family: "proxima-nova";
      text-transform: uppercase;
      font-size: 1.5em; letter-spacing:;}
  
  
  @media screen and (max-width:800px) { 
     .image span { 
          font-size:0.8em; 
      }
  }
  @media screen and (max-width:400px) { 
      .image span {
          font-size:0.7em; 
      }
  }
  
  
  
  .bg{
    background-color: #e94378;
  }
  
  img.ri
   {
   position: relative;
   max-width: 100%;
   width:100%;
   display: inline-block;
   vertical-align: middle;
   }
  
   @media screen and (orientation: portrait) {
   img.ri { max-width: 100%; }
   }
   @media screen and (orientation: landscape) {
   img.ri { max-height: 100%; }
   }
  
  
  .text{
  font-family: "proxima-nova";
    font-size: 1em;
  letter-spacing: .2em;
    text-transform: uppercase;
  background-color: #e94378;
  padding:20px;
  color:yellow;
  position: absolute;
  left:200px;
  bottom:50px;
  }
  
  .tex{
    font-family: "proxima-nova",sans-serif;
    font-size: 2.5em;
    letter-spacing: 3px;
    text-transform: uppercase;
    bottom:160px;
    left: 320px;
    color:white;
    padding: 10px;
  
  
  }
  
  .image{
    vertical-align: middle;
  }
  .logo a:hover{
  color:white;
  }
  .active a{
    color:white;
  }
  
  .contain{
    display: table;
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }
  .block {
    display: table-row;
    height: 1px;
  }
  .navigation {
    display: inline-block;
    padding: 10px;
    width:100%;
    margin: auto;
    height: 150px;
  }
  
  .top {
    background-color: #444;
    width:100%;
    display: inline-block;
    padding: 10px;
    text-align: center;
  
  
  }
  
  .navigation:nth-child(odd) {
    background: #222;
  
  }
  .push {
    height: auto;
  }
  .contar {
    margin: 0 auto;
    text-align: center;
    width:100%;
    height:400px;
    background-color: white;
  
  
  }
  
  img.ft{
    float:left;
  }
  .featured{
    background-color: white;
    width:69%;
    text-align: center;
    margin: 0 auto;
    display: inline-block;;
  }
  .block:nth-child(odd) {
    background: #fff;
  }
  
  
  .search {
  border:0px; 
  background-color:transparent; 
  color:white;
  display: inline-block;
  height:28px;
  }
  
  .section-nav a{-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none;}
  .section-nav a.active,.section-nav a:hover{color:#fff;text-decoration:none}
  
  
  
  h1{
  font: 800 1em "proxima-nova", sans-serif;
  font-size:3.125em;
  text-align:center;
  padding:10px 10px;
  margin:20px 20px;
  background-color:;
  position: relative;
  text-decoration:none;
  display:inline-block;
  letter-spacing: 6px;
  color:yellow;}
  
  h1 a{
  text-decoration: none;
  letter-spacing: 8px;
  padding-left: 0.15em;
  color:#a8a820;
  }
  
  
  
  .txt{
    font:800 proxima-nova;
  }
  
  
  
  
  
  
  
  h2{
  font: 800 1em "proxima-nova", sans-serif;
  font-size:3.125em;
  text-align:center;
  padding:10px 10px;
  margin:20px 20px;
  background-color:;
  position: relative;
  text-decoration:none;
  display:inline-block;
  letter-spacing: 6px;
  color:yellow;}
  
  h2 a{
  text-decoration: none;
  letter-spacing: 8px;
  padding-left: 0.15em;
  color:#a8a820;
  }
  </code></pre>