html – Row ignores parent container padding


I’m relatively new to css, and there’s a problem that should be fundamental, but I don’t seem to understand.

The problem is the row div of bootstrap container-fluid ignores padding set on the container-fluid div.

enter image description here

The inner border is the row and the outer border is the container-fluid with its margin and padding. The row seems to ignore the padding I set. There is nothing in my code setting this behavior.

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-sm"></div>
  </div>
</div>

CSS

.container-fluid {
  margin: 1%;
  padding: 3%;
  border: solid 1px black;
}

.row {
  height: 50px;
  border: solid 1px black;
}

Any advice? I may not have perfect understanding off css, but I don’t think this is something that should happen.



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here