How do I prevent the website from stretching to left and right?

Question

I don't want the website to stretch to left and right therefore I want to keep them white, as shown in the picture

My CSS code:

body {margin: 0 auto; width: 960px; background-color: olive;}
* {margin: 0; padding: 0;}
header, nav, article, section, footer {display: block;}
header {background: silver; width: 960px; height: 100px;}
nav {width: 150px; float: left;}
article {width: 806px; min-height: 650px; float: right; border-left: groove 
4px;}
footer {background: blue; width: 960px; height: 50px; clear: both;}

Answer 1

You should wrap your map and green space inside of a <div> . That way you can center the div and only apply styling to that area, rather than the whole page. It would be helpful if you provided some of the HTML behind your page so we can see what that looks like

Answer 2

Have you tried to set css like these?

body {margin: 0 auto; width: 100%; background-color: olive;}
* {margin: 0; padding: 0;}
header, nav, article, section, footer {display: block;}
header {background: silver; width: 100%; height: 100px;}
nav {width: 150px; float: left;}
article {width: 806px; min-height: 650px; float: right; border-left: groove 
4px;}
footer {background: blue; width: 960px; height: 50px; clear: both;}