Why does the background cover one text above?

1 
<style>
  Body {background: Gold}

h1{color: black;
  font-family: Times New Roman;
  font-size: 50px;
  text-align: center;}

h2{color: black;
  font-family: Arial;
  text-align: center;
  border-top: solid 2px Black;
  border-right: solid 2px Black;
  border-bottom: solid 2px Black;
  border-left: solid 2px Black;
  padding: 20px;
  margin: 20px}

.first-background {background-color: black;
 padding-top: 16px;
 padding-bottom: 16px;
 margin-right: -16px; 
 margin-left: -16px;}
</style>

<div class="container-fluid">
    <div><h1>Name</h1>
  <h1>Kanji Name</h1>
      <h2 class="col-xs-8 col-xs-offset-2">Description</h2></div>

  <div class="text-center first-background">
  <h3>Text</h3>
    </div>

The black background covers the h2 class=“col-xs-8 col-xs-offset-2”>Description</h2 above, and only by removing the class=“col-xs-8 col-xs-offset-2” which I would like to use to make the rectangle shape less wide or putting a /div and another div class= “container-fluid” below can I make the black background not cover it. Can someone give me an explanation of why the black background covers it and is there another way to fix it?

2

Try this

<div class="container-fluid">
  <div>
    <h1>Name</h1>
    <h1>Kanji Name</h1>
    <h2 class="col-xs-8 col-xs-offset-2">Description</h2>
  </div>
</div>
<div class="text-center first-background">
  <h3>Text</h3>
</div>

You forgot to close a div

3

But it causes the code below containing “text-center first-background” not to be part of the “container-fluid”, which forces me to put another div class=“container-fluild” like I said.

4

Sorry I’ve misunderstood you. This should work fine (I hope):

<div class="container-fluid">
  <div>
    <h1>Name</h1>
    <h1>Kanji Name</h1>
    <div class="row">
      <div class="col-xs-8 col-xs-offset-2">
        <h2>Description</h2>
      </div>
    </div>
  </div>

  <div class="text-center first-background">
    <h3>Text</h3>
  </div>
</div>
5

It worked, thank you very much. So the class=“row” was actually necessary for even one “col…”.

1 Like