Background color only filling h2 element not its entire div container

Question

I have the following div and h2 element below. I'm trying to fill the entire div with a blue color, but instead of filling the entire container2 class like I expect it only fills the h2 section. Why is it doing this and how can I fill the entire container2 section (which has some margin and padding outside the area of the h2?

    h2 {
      color: white;
      font-size: 35px;
      font-weight: 500;
    }
    
    .container2 {
      text-align: center;
      font-family: Carnas-Light;
      background-color: #0f2c4d;
      margin-top: 40px;
      margin-bottom: 40px;
      padding-right: 15px;
      padding-left: 15px;
      width: 83.33333333%;
      margin-left: 8.33333333%;
      height: 100%;
    }

  <div class="container2">
                        <h2>WorkWave provides intuitive cloud-based field service & fleet management solutions that help organizations with a mobile workforce transform their business.</h2>
                </div>

It's filling whole container2. Check Chrome Dev Tools. It will not apply background to margins. — Vitalii Chmovzh, Feb 11 '18 at 18:11
add `overflow: auto;` to container ... you are facing margin collapsing issue, the margin of h2 is getting outside — Temani Afif, Feb 11 '18 at 18:13
and in case you want to fill the whole screen, remove all the margin, or add background to body — Temani Afif, Feb 11 '18 at 18:17

Sviat Kuzhelev · Answer 1 · 2018-02-11T18:29:59.743

0

Just add the next style code into your stylesheet:

.container2 > h2 {
  background-color: #0f2c4d;
}

Your way does not work, because you set BG-color only for parent element container2, instead of using the inheriting and for h2 elem.

Run the code:

    h2 {
      color: white;
      font-size: 35px;
      font-weight: 500;
    }
    
    .container2 {
     text-align: center;
     font-family: Carnas-Light;
     background-color: #0f2c4d;
     padding-top: 40px;
     padding-bottom: 40px;
     padding-right: 15px;
     padding-left: 15px;
     width: 83.33333333%;
     margin-left: 8.33333333%;
     height: 100%;
    }

    .container2 > h2 {
      background-color: #0f2c4d;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>

  <style>


  </style>

</head>
<body>
 
 <div style="background-color: #0f2c4d;">
  <div class="container2">
            <h2>WorkWave provides intuitive cloud-based field service &amp; fleet management solutions that help organizations with a mobile workforce transform their business.</h2>
        </div>
    </div>

<script>


</script>

</body>
</html>

edited Feb 11 '18 at 18:29

answered Feb 11 '18 at 18:17

Sviat Kuzhelev

1,758
10
28

that doesn't work – Dog Feb 11 '18 at 18:20
1

Oh, maybe we have the misunderstanding. You need to change your margins to padding. And also put your container2 into the support
. So try this: `.container2 { text-align: center; font-family: Carnas-Light; background-color: #0f2c4d; padding-top: 40px; padding-bottom: 40px; padding-right: 15px; padding-left: 15px; width: 83.33333333%; margin-left: 8.33333333%; height: 100%; }`
– Sviat Kuzhelev Feb 11 '18 at 18:23
1

with this: `

WorkWave provides intuitive cloud-based field service & fleet management solutions that help organizations with a mobile workforce transform their business.

` @Dog let me know, please, if this was help you – Sviat Kuzhelev Feb 11 '18 at 18:23
1

thanks, i got it. it was those margins causing issues. – Dog Feb 11 '18 at 18:28
@Dog I'm glad that help you. Please, mark my answer as correct to your question, if it was helpful you! ) – Sviat Kuzhelev Feb 11 '18 at 18:32
it's helpful but not entirely correct because it doesn't account for the side margins, but i hooked you up with an up vote. – Dog Feb 11 '18 at 18:33
@Dog margins never have a `background-color` setup. You can set it only to paddings. If you really need to do this for margins you should describe your question more. Because to do this we have a several ways with different methods. – Sviat Kuzhelev Feb 11 '18 at 18:36

Background color only filling h2 element not its entire div container

1 Answers1

WorkWave provides intuitive cloud-based field service & fleet management solutions that help organizations with a mobile workforce transform their business.