Q: Margin having an affect on unrelated div I've hit a wall here...
I have a title that I want to align centrally on the page. I've done this by using #landingAreaContent {position: relative; margin: auto; text-align: center; background-color: blue;.
The title is wrapped in a div that is, in turn, sitting inside a full-screen div.
I then wanted to increase the title div's top margin to bring the title down. Simple, yes?
Except when I add in margin: 50px into the style for the div containing the title, the full-screen div moves down with it.
Even more annoyingly, when I try to do exactly the same thing with divs further down the page, everything works fine.
Why is this happening? See code and screen shots for context.


body {
 margin: 0;
 padding: 0;
}

#landingArea {
 width: 100vw;
 height: 100vh;
 background-color: #6fc9ff;
}

#landingAreaContent {
 position: relative;
 margin: auto;
 text-align: center;
 background-color: blue;

}#belowFold {
 width: 100%;
 height: 100%;
 background-color: white;
}

#belowFoldContent {
 position: relative;
    margin: auto;
    margin-top: 50px;
    text-align: center;
}

h1 {
 margin: 0;
 padding: 0;
 font-family: 'Dancing Script', cursive;
 font-size: 60px;
}
<!DOCTYPE html>
<html>
<head>
 <title>Becky's Pet Services</title>
 <link rel="stylesheet" type="text/css" href="bps2CSS.css">
 <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Raleway" rel="stylesheet">
</head>
<body>

<div id="landingArea">
 <div id="landingAreaContent">
  <img id="langingAreaLogo" src="">
  <h1>Becky's Pet Services</h1>
 </div>
</div>

<div id="belowFold">
 <div id="belowFoldContent">
  <h1>Welcome!</h1>
  <p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p>
</div>


</body>
</html>




P.S. The garish colours are only there for visibility of the divs. :D

A: You have to force parent elements to contain their children (or their childrens' margins) in some cases:
#landingArea {
    ...
    overflow: hidden; /* or auto */
}



html,
body {
    margin: 0;
    padding: 0;
}

#landingArea {
    height: 100vh;
    overflow: hidden;
    background-color: #6fc9ff;
}

#landingAreaContent {
    position: relative;
    margin: auto;
    text-align: center;
    background-color: blue;
    margin-top: 50px;
}

#belowFold {
    width: 100%;
    height: 100%;
    background-color: white;
}

#belowFoldContent {
    position: relative;
    margin: auto;
    margin-top: 50px;
    text-align: center;
}

h1 {
    margin: 0;
    padding: 0;
    font-family: 'Dancing Script', cursive;
    font-size: 60px;
}
<div id="landingArea">
    <div id="landingAreaContent">
        <img id="langingAreaLogo" src="">
        <h1>Becky's Pet Services</h1>
    </div>
</div>

<div id="belowFold">
    <div id="belowFoldContent">
        <h1>Welcome!</h1>
        <p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p>
    </div>


