Why is the background slides down because of the margin?

<div class="all-wrapper">
 <div class="first-page">
 <div class='flex-container'>
 <div class="logo">
 <img src="img/wonlex.png"/>
 <span>Official distributor</span>
</div>
<nav>
 <ul class="menu">
 the <li>About the store</li>
 the <li>Advantages of the original</li>
 the <li>Basic functions</li>
 an <li>watch Catalogue</li>
 the <li>How to buy</li>
the <li>Contacts</li>
</ul>
</nav>
 <div class="phone-adres">
 <span class="phone">8 (383) 420-40-40</span>
 <span class="adres">Novosibirsk, Kirova 29</span>
</div>
</div>

</div>
 </div>

*{
 box-sizing: border-box; 
}

html{
 height: 100%;

}
body{
 margin: 0;
 height: 100%;
}
.all-wrapper{
 background: white;

}
.first-page{
 background-image: url("img/main-bg.png");
}
.flex-container{
 display: flex;
justify-content:space-between;
 margin: 20px 40px 0 40px;

}

the div with the class flex-container lies within the block .first-page, but for some reason the inner margin of the block affects the background of the outdoor unit, why?
5cfa4d620cfea537424174.png
March 23rd 20 at 19:31
1 answer
March 23rd 20 at 19:33
Solution
This effect is called vertical margin collapse.
To read htmlbook.ru/blog/skhlopyvayushchiesya-otstupy or naguglit any other article on this subject.
With Your permission I will add a little. Regarding to Google, it is best to always use the source. For example in your question, you can see the spec here https://www.w3.org/TR/CSS2/box.html#margin-properties. - Pat_Reichel51 commented on March 23rd 20 at 19:36
@Pat_Reichel51, yeah, I'm in spec.

There are only tight-fisted, boring, and not all are willing to understand English, even though the built-in interpreter in the browser. And yet, when a person has a problem, he formulates it as some kind of "not working margin" or "margin strange work" and not "box|block model of the document." To my sorrow SPECA is not the query problem :( - Myrtis_Douglas commented on March 23rd 20 at 19:39
Now, I didn't love her and I agree that there sparingly and boring, but in order to learn we must make the effort, otherwise you can lose n-th number of years, using ready-made solutions. Well, English too needs to be tightened, certainly. Our dialogue needs a little nudge the reader think! Thank you for understanding.) Good and excellent mood. - Pat_Reichel51 commented on March 23rd 20 at 19:42

Find more questions by tags CSS