where do i put the code for a new window
<p>I cannot seem to remove the whitespace on the side of the footer as shown in the image. I tried width:100%; and almost every method online after i googled. here is the footer's html and css</p>

<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>.container {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
         margin-left: auto;
      margin-bottom: 0px;
      width: 100%;
    }
    .footer{
  background:url(../images/pw_maze_black_2X.png) left top repeat;
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;

 }
 .footer-logo{
  margin:15px auto 35px;
  width: 76px;
 }
    .copyright{
  color:#cccccc;
  font-size:14px;
  display:block;
  text-align:center;
 }
 .copyright a{
  color:#7cc576;
  font-weight:600;
  text-decoration: none;
  transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
 }

 .copyright a:hover {
  color: #fff;
 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;footer class="footer"&gt;
        &lt;div class="container"&gt;
            &lt;div class="footer-logo"&gt;&lt;a href="#"&gt;&lt;img src="images/footer-logo.png" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;span class="copyright"&gt;Copyright © 2015 | &lt;a href="http://bootstraptaste.com/"&gt;Bootstrap Themes&lt;/a&gt; by BootstrapTaste&lt;/span&gt;
        &lt;/div&gt;
    &lt;/footer&gt;</code></pre>
</div>
</div>
</p>

<p>anything else i can try?</p>