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.
@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.
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.