I have been trying to figure out the CSS for one of my projects.
I have a class ‘header-container’ applied to the div container which on checking is as follows –
I have a query on why are the contents of the ‘wrapper’ div which is the child of ‘header-container’ div, not entirely inside the content box (i.e. the blue highlighted box) and can be seen in the orange part.
Please find the CSS for the wrapper div below –
Why is the element CSS not following the CSS Box Model? and how can it be resolved?
Project is published on – https://surijatin.github.io/covid-second-dose/
Answer
The answer is in your image:
-
.header-container
has a specified height of 2vh. That’s the height limit. -
So the text in
.wrapper
is simply overflowing that fixed height.
The orange sections are the 2vh top and bottom margins you’ve set.
Remove the height: 2vh
, or switch to min-height: 2vh
, and the problem should be resolved.