Skip to content

CSS box model issue

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 –

header-container-css

header-container-css-1

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 –

wrapper-div

wrapper-div-1

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.