Why is the background color of my DIV element not visible?-CodePudding

/**This code doesnt change the color of the class row1**/

html, body {
  font-family :'montserrat',sans-serif;
  }
h1 {
  border-left  : 2px solid #00f28f;
  font-size    : 48px;
  font-weight  : 400;
  padding-left : 20px;
  }
.main {
  margin-top : 80px;
  }
form input {
  background : #F0f0f0;
  border     : none;
  font-size  : 36px;
  padding    : 20px;
  width      : 100%;
  transition : background 0s, border-left 0s;
  }
form input:focus {
  background  : #fff;
  border-left : 2pxsolid #000;
  box-shadow  : none;
  outline     : none;
  }
button.button {
  background : transparent;
  border     : none;
  color      : #00f2bf;
  cursor     : pointer;
  font-size  : 36px;
  padding    : 20px 24px;
  transition : background 0s, border-left 0s;
  }
button.button:hover {
  background : #00f2bf;
  color      :  #fff;
  }
.row1 {
  background : yellowgreen;
  }

<link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="C:\Users\kalyanasundar.s\OneDrive - HCL Technologies Ltd\Desktop\proj\proj.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<header class="header">
  <div class="container">
    <div class="row">
      <div class="col-xs-2 col-md-2">
        <h1>Kalyan The Coder</h1>
      </div>
    </div>
  </div>
</header>
<div class="main">
  <div class="container2">
    <div class="row1">
      <form class="form">
        <div class="col-xs-8 col-md-4">
          <input type="text" id="TextBox1" placeholder="Enter your query">
        </div>
        <div class="col-xs-4 col-md-2">
          <button type="submit" class="button">post</button>
        </div>

This command works fine except that the row1 color doesn't change and not sure why.
If I change row1 to row on CSS, the color of header changes. I am not sure how to change the class in the CSS style sheet.
I am beginner and would like to explore more on this.

CodePudding user response：

You need to give your element height.

It helps to simplify the problem. Currently, if you add height: 100px to your row1 class, the background becomes a visible yellowgreen as you desire:

.row1 {
    background: yellowgreen;
    height: 100px;
}

Let's show the difference with a simplified snippet:

.row-1 { background-color: yellowgreen; }
.row-2 {
  height: 100px;
  background-color: red;
}

<div class="row-1"></div>
<div class="row-2"></div>

Notice how you can't see row-1 here? Adding a height, padding, or anything else that expands the div's area will make it show:

.row-1 { background-color: yellowgreen; }

<div class="row-1">
  <p>This should make the row visible.</p>
</div>