What is the cause of this margin behaving as it is?

Hi coders!

What is causing the .container-fluid div to have a margin rather than there being a margin between the .container-fluid div and the #screen div?

My guess is it is because of using % in the margin, but I’m not sure why that has caused a problem and reacted in the way it has. Here is the codepen https://codepen.io/BLBaylis/pen/WZOJqm?editors=1100. I’m using Bootstrap 4 in this pen.


/*My HTML*/

<div id="container-fluid" class="container-fluid">
  <div id = "screen">

/*My CSS*/

body, html {
  height : 100%;

#container-fluid {
  background-color : grey;
  height : 100%;

#screen {
  background-color : green;
  margin : 7% 0%;

@BLBaylis Have you inspected the code using DevTools? That may give you a clue. The only margin I notice is a 15px left and right padding for the #container-fluid div that seems to be put there by Bootstrap.

From _grid.scss:19:

.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;

I’m not sure if that’s what you’re referring to.

Thanks for the response. I have yet to check DevTools, so that will be my next port of call. I’m attempting to put a margin above the green #screen div and I was expecting it to appear as I’ve depicted in my crummy MS Paint pic included below.

But rather than there being a margin between the #screen div and the .container-fluid div, it seems like a margin is appearing above the .container-fluid div instead.

I’m sure there is a valid reason it is behaving this way, but I’m finding it very confusing. Hope this explanation makes sense.

Crummy MS Paint pic : https://i.imgur.com/fKTVI6Z.png

Edit : Also, I’m sure this could easilt be resolved with applying padding to the container-fluid, but I would like to know what causes this if I can.