CSS box model issue

user_16085688 0
Viewed 75

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/

flexbox css html javascript
1 Answers

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.

user_35972760
Related