html body color,html - How to change only body color? - Stack Overflow

Im trying to change only my body color, i have a div with my content, and I want my body, only outside of main div to be gray. I've tried changing my body background color to grey and div to white:

body

{

font-family: 'Roboto',sans-serif;

background-color: #cccccc;

}

div#content

{

display: block;

width: 85%;

background-color: #FFF;

margin-left: auto;

margin-right: auto;

}

but then it all gets grey.

My code:

* {

box-sizing: border-box;

margin: 0;

}

body {

font-family: "Roboto", sans-serif;

background-color: #cccccc;

}

div#content {

display: block;

width: 85%;

background-color: #fff;

margin-left: auto;

margin-right: auto;

}

header {

width: 100%;

display: block;

float: left;

}

article {

float: left;

width: 100%;

margin-top: 50px;

display: block;

}

header img {

float: left;

width: 150px;

height: 50px;

}

header ul {

list-style: none;

float: left;

margin-top: 15px;

}

header ul li {

display: inline-block;

margin-right: 5px;

transition: 0.5s;

box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

text-transform: uppercase;

background-color: #f9c319;

font-size: 11pt;

color: white;

padding: 5px;

}

header ul li:hover {

background-color: #1fc0ee;

}

section#principal {

float: left;

width: 100%;

display: block;

}

section#secundaria {

float: left;

width: 100%;

display: block;

margin-top: 50px;

margin-bottom: 10px;

}

section#principal img {

float: left;

width: 350px;

height: 230px;

box-shadow: 10px 11px 20px -4px rgba(0, 0, 0, 0.75);

margin-right: 25px;

}

section#principal p {

text-align: justify;

font-size: 14pt;

}

section#secundaria figure {

width: 33.33%;

float: left;

text-align: center;

}

section#secundaria figure figcaption {

margin-bottom: 15px;

font-size: 12pt;

}

section#secundaria figure img {

height: 200px;

width: 280px;

box-shadow: 10px 11px 20px -4px rgba(0, 0, 0, 0.75);

}

section#secundaria figure p {

text-align: justify;

padding: 10px 50px 10px 50px;

font-size: 12pt;

}

footer {

width: 100%;

padding: 10px;

float: left;

display: block;

border-top: 1px solid #111111;

}

footer section {

margin-left: 500px;

display: block;

}

footer section img {

width: 32px;

}

footer p {

float: right;

font-size: 10pt;

}