Width 100% with white borders around it. WHy?

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: http://hayden-demo.squarespace.com/

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:

    .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;

}

Solution 1:

The body element has some margins by default. Unless you remove them, any element that you put inside, no matter it's width (unless it's in position absolute I think) will have some borders. They aren't borders, but the gab in between the end of your element and the side of the body. Try this :

body{
    margin: 0;
}

If that doesn't work, then please show us an example of your code on JSBin, Codepen or similar (or even a live version if possible).

Solution 2:

did you tried to reset the margin and padding of all element to 0, if not then try following code into your css file.

*{
  padding:0;
  margin:0;
}