Fotan Fotan - 7 months ago 11
HTML Question

Problems with adding margin

Link to the website: https://jsfiddle.net/L84vhah9/

Now go into the CSS, go all the way down to

.box
and change the
margin: 0 auto;
to
margin: 2% auto;


Then check the website again. See how the whole
section
moves/gets the margin instead of just the
box
. It creates a space between the
nav
and
section
.

Why is this happening?

Shouldn't just the
.box
get the margin? I don't understand why
<section>
gets it.

Lal Lal
Answer

See this fiddle

You could easily solve the problem by adding

overflow:auto;

or

overflow: hidden;

to the parent div..ie to your section.

Thus, the updated CSS for section and .box would be as follows

section {
    overflow: hidden;
  width: 90%;
  height: auto;
  margin: 0 auto;
  background-color: #fff;
}

.box {
  width: 90%;
  height: 300px;
  margin: 2% auto;
  border: 5px solid #36FF54;
  background: #ffffff;
}