I think one of the biggest problems you’ve been experiencing (and I’ve seen this over multiple posts of yours) is that you’re combining a lot of different frameworks and it’s getting really jumbled together and therefore not working as it should.
My recommendation there is stick to just one. If want to used bootstrap, just use bootstrap. If you want to do css grid, just use that. Same thing with flexbox. By combining all three you’re confusing the browser.
So here’s my question to you, which out of bootstrap, flexbox, css grid, and plain old css do you know the best? Whichever one that might be, I’d say focus on just using that.
As for your questions:
1.) Which margin are you referring to? Like on which specific element?
2.) It depends on the elements they’re going on. I’ll give ya a crash course on the display attribute…
So, every html element (tag) is by default either block or inline. I believe the major three that are by default inline are <span>, <img>, and <a> tags. Inline elements have no width or height, in fact they can’t even accept those properties. So if you were to do something like this:
<a href="somelink" id="somelink"> Some link </a>
#somelink{
width: 200px;
height: 100px;
}
It won’t work, because as I mentioned before an <a> is inline. So, in order to be able to set a width and a height to our link we need to set the display to block:
<a href="somelink" id="somelink"> Some link </a>
#somelink{
display: block;
width: 200px;
height: 100px;
}
And it’ll be the same thing with span tags.
Now doing something like this:
<div class="box">I'm a div</div>
.box{
display: block;
width: 400px;
height: 400px:
}
Placing display block on a div element is redundant, because div’s by default are already block level elements. So you can delete that property all together.
Here’s a list of all block level elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
And here’s a list of all inline elements while we’re at it: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
Now to go back to your #2 question…typically I’ll put display: flex; on an element that I’m using as a container like this (Edit: changed for a better example of needing display block):
<div class="container">
<a href="somelink">I'm a link!</a>
<p>Text blah blah blah</p>
</div>
.container{
display: flex;
}
Now let’s say I want to define a responsive width on that link in my container div, well first I got to redefine it as a block level element, because remember its inline by default:
.container a{
display: block;
width: 100%;
max-width: 200px;
}
So you can definitely use display block together with display flex BUT as you mentioned before it can’t be on the same element and you’d only be using display block if you needed to change the default display of an element. Does that make sense?
3.) The background color is technically working, the problem is .headline-flex has no height. Right now it’s displaying 800 x 0. You’ll need to give it a height for it to show up.
I thought you wanted the grey box at the very bottom of the website. My bad.