title: Width 100% with white borders around it. WHy?
body: <p>Ok, I'm trying to design a website that has an image at the top that spans the full width of the browser. And below that I want to put different colored div containers that also span the full width. kinda like this:
  <a href="http://hayden-demo.squarespace.com/" rel="nofollow">http://hayden-demo.squarespace.com/</a></p>
  
  <p>I've tried background-size:cover but I want different backgrounds for each section of the page.  The only thing I've found after many hours of searching is width: 100% but it leaves white borders around my image...
  Please help, I'm desperate. This is my current CSS:</p>
  
  <pre><code>    .mainimg {
  background-image: url(_DSC0656.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  -moz-background-size: cover;
  background-size: cover;
  width:100% !important;
  height: 700px;
  margin:0 auto;
  display:block;
  </code></pre>
  
  <p>}</p>