CSS: main content should have background-color

Question

I am making a common header and footer which will be used throughout in all the HTML pages. My page has a white header and white footer and the body is grey colored. Now, my work demands to achieve as below:

What I achieved so far is as below:

I don't know why I am getting these white strips in the sides of the body tag. Please suggest, my code is as below.

main {
  background-color: lightgrey;
  padding: 50px;
}

header {
  background-color: white;
  width: 100%;
  height: 50px;
}

.content-section {
  background-color: lightgrey;
  width: 100%;
}

.logo {
  height: 20px;
  margin: 15px 5px;
  width: 116px;
}

.open-card-BG {
  font-weight: 300;
  margin: 0 auto;
  width: 65%;
  padding: 20px 40px;
  object-fit: contain;
  max-width: 325px;
  min-height: 200px;
  border-radius: 5px;
  display: table;
  background-color: white;
  position: relative;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}

.open-card-BG::after {
  content: '';
  position: absolute;
  top: 30px;
  left: 100%;
  width: 30px;
  height: 30px;
  background: url(../secure.svg) center no-repeat;
  background-size: contain;
}

<header>
  <img class="logo" src="logo.gif" />
</header>
<main>
  <div class="open-card-BG">main content</div>
</main>
<footer>
  I am footer
</footer>

Since one is suppose to accept answers, and as it is a really good way to both promote quality content and motivate users to provide useful answers on your future questions, may I ask why you don't do that? — Asons, Aug 24 '17 at 08:49
Btw, is this code meant only for Chrome? ... Asking because your code renders different on Chrome and Firefox/Edge and IE, and on IE it gets messed up completely — Asons, Aug 24 '17 at 09:11

score 1 · Answer 1 · answered Aug 24 '17 at 07:45

That is because of the default (user agent stylesheet) margin applied by the browser on the body tag - see how the white stripes vanish when I set margin: 0 for body.

Demo below:

body {
  margin: 0;
}

main {
    background-color: lightgrey;
    padding: 50px;
}
header {
    background-color: white;
    width: 100%;
    height: 50px;
}
.content-section {
    background-color: lightgrey;
    width: 100%;    
}
.logo {
    height: 20px;
    margin: 15px 5px;
    width: 116px;   
}
.open-card-BG {
    font-weight: 300;
    margin: 0 auto;
    width: 65%;
    padding: 20px 40px;
    object-fit: contain;
    max-width: 325px;
    min-height: 200px;
    border-radius: 5px;
    display: table;
    background-color: white;
    position: relative;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
.open-card-BG::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 100%;
    width: 30px;
    height: 30px;
    background: url(../secure.svg) center no-repeat;
    background-size: contain;
}

<header> 
    <img class="logo" src="logo.gif"/>
</header>
<main>
    <div class="open-card-BG">main content</div>
</main>
<footer>
    I am footer
</footer>

This solves the issue :) thanks – Anna Aug 24 '17 at 08:54 — Anna, Aug 24 '17 at 08:54

score 1 · Answer 2 · answered Aug 24 '17 at 07:46

add body{margin:0} in your stylesheet. By default body tag have margin of 8px in most major browsers.

body{
  margin:0
}
main {
     background-color: lightgrey;
     padding: 50px;
    }
    header {
     background-color: white;
     width: 100%;
     height: 50px;
    }
    .content-section {
     background-color: lightgrey;
     width: 100%; 
    }
    .logo {
     height: 20px;
        margin: 15px 5px;
        width: 116px; 
    }
    .open-card-BG {
     font-weight: 300;
     margin: 0 auto;
     width: 65%;
     padding: 20px 40px;
     object-fit: contain;
     max-width: 325px;
     min-height: 200px;
     border-radius: 5px;
     display: table;
     background-color: white;
     position: relative;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    }
    .open-card-BG::after {
     content: '';
     position: absolute;
     top: 30px;
     left: 100%;
     width: 30px;
     height: 30px;
     background: url(../secure.svg) center no-repeat;
     background-size: contain;
    }

<header> 
     <img class="logo" src="logo.gif"/>
    </header>
    <main>
     <div class="open-card-BG">main content</div>
    </main>
    <footer>
     I am footer
    </footer>

This solves the issue :) thanks – Anna Aug 24 '17 at 08:54 — Anna, Aug 24 '17 at 08:54

score 0 · Answer 3 · answered Aug 24 '17 at 07:48

0

you can try giving the main tag a margin: 0 -10px, may solve your problem.

See the fiddle

answered Aug 24 '17 at 07:48

Ovidiu Unguru

756
5
14

score 0 · Answer 4 · answered Aug 24 '17 at 07:53

0

you can add this code in your css:

body {
    display: initial;
}

answered Aug 24 '17 at 07:53

veera

329
1
6

Since IE is still a major browser, I find it crucial to tell that this won't work in it – Asons Aug 24 '17 at 08:59
Let me know if you update with that and I'll retract my downvote – Asons Aug 24 '17 at 09:12
display initial is different from browser to browser in that case you can add display:inline; it will work in all major browsers – veera Aug 24 '17 at 09:24
My comment is not about changing the `display` value to defeat the margin, IMHO the given answer need an additional note it won't work in IE – Asons Aug 24 '17 at 09:38

score 0 · Answer 5 · answered Aug 24 '17 at 08:08

0

Try the following:

html, body {margin: 0;}

answered Aug 24 '17 at 08:08

Joseph Davidson

77
4

When you start to explain why something works, you'll get upvotes as well – Asons Aug 24 '17 at 09:13

CSS: main content should have background-color

5 Answers5