A block doesn't want to stand under other blocks
<p>I try to make a page and I have a problem with blocks position. I want to place the lower block right under the second one, but it stays at the very top of the page:</p>

<p><a href="https://i.stack.imgur.com/kwuei.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kwuei.jpg" alt="enter image description here"></a>
When I add margin to this block, two other blocks move with it.
Here is the code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background-color: #14000b;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}
.header {
  position: relative;
  background-color: #000000;
  float: left;
  width: 100%;
  left: 0;
  top: 0;
  margin: 0 auto;
  height: 80px;
  vertical-align: baseline;
}
#top-image {
  background-image: url(../images/top-image.png);
  height: 69px;
  width: 466px;
  display: block;
  margin: 0 auto;
}
#sub-header {
  position: relative;
  background-color: #161616;
  float: left;
  width: 100%;
  left: 0;
  top: 0;
  height: 60px;
  visibility: inherit;
  vertical-align: baseline;
}
#mid-header {
  margin: 0 0 0 0;
  background-color: #161616;
  height: 60px;
  margin: 0 10% 0 10%;
}
#header-logo {
  height: 80px;
  width: 142px;
  background-image: url(../images/header-logo.png);
  float: left;
  margin-right: 15px;
}
#main-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #161616;
  height: 60px;
}
.top-menu-list {
  float: left;
  height: 60px;
}
.top-menu-list a {
  display: block;
  color: #d6d6d6;
  text-align: center;
  padding: 20px 14px;
  text-decoration: none;
  font-size: 20px;
  height: 60px;
  font-family: Arial, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, sans-serif;
}
.top-menu-list a:hover {
  background-color: #d62952;
  color: #f8f8f8;
}
#main-block {
  position: relative;
  display: block;
  margin: 0 10%;
  padding: 10px;
  background-color: #303030;
  height: 1100px;
  vertical-align: baseline;
}
#wide-column {
  width: 70%;
  height: 100%;
  background-color: #161616;
}
#footer {
  background-color: #000000;
  float: left;
  min-width: 100%;
  left: 0;
  top: 0;
  margin: 0 auto;
  height: 350px;
}
#mid-footer {
  margin: 0 12% 0 12%;
  background-color: #000000;
  height: 160px;
  padding-top: 20px;
}
#sm-list {
  list-style-type: none;
  margin: 20px 0 20px 0;
  padding: 0;
  overflow: hidden;
}
.sm-button {
  float: left;
  margin-right: 10px;
}
.sm-button a {
  display: block;
  text-decoration: none;
}
#feedback-button {
  width: 150px;
  height: 60px;
  margin-top: 20px;
  background-color: #1a84dd;
}
#feedback-link {
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 19px 14px;
  text-decoration: none;
  font-size: 22px;
  vertical-align: middle;
  height: 60px;
  letter-spacing: 1px;
  font-family: Arial, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, sans-serif;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
  &lt;div id="top-image"&gt;

  &lt;/div&gt;

&lt;/div&gt;

&lt;div id="sub-header"&gt;
  &lt;div id="mid-header"&gt;

    &lt;div id="header-buttons"&gt;
      &lt;ul id="main-menu"&gt;
        &lt;li class="top-menu-list"&gt;&lt;a href="index.html" class="top-menu-link"&gt;HOME&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="top-menu-list"&gt;&lt;a href="#" class="top-menu-link"&gt;LIAPEDIA&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="top-menu-list"&gt;&lt;a href="#" class="top-menu-link"&gt;GUIDES&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="top-menu-list"&gt;&lt;a href="#" class="top-menu-link"&gt;ABOUT&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div id="main-block"&gt;
  &lt;div id="wide-column"&gt;

  &lt;/div&gt;

  &lt;div id="small-column"&gt;

  &lt;/div&gt;

&lt;/div&gt;

&lt;div id="footer"&gt;
  &lt;div id="mid-footer"&gt;
    &lt;img src="images/links.png" id="links-label"&gt;
    &lt;div id="social-media-buttons"&gt;
      &lt;ul id="sm-list"&gt;
        &lt;li class="sm-button"&gt;
          &lt;a href="http://vk.com/lifeinarena" target="_blank" class="sm-link"&gt;
            &lt;img src="images/socvk.png"&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="sm-button"&gt;
          &lt;a href="https://twitter.com/LifeInArena" target="_blank" class="sm-link"&gt;
            &lt;img src="images/soctwitter.png"&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="sm-button"&gt;
          &lt;a href="https://www.youtube.com/channel/UCe04DzYZgUIYzwXqZFF1_mA" target="_blank" class="sm-link"&gt;
            &lt;img src="images/socyt.png" &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;img src="images/wanttotelussomething.png" id="feedback-label"&gt;
    &lt;div id="feedback-button"&gt;
      &lt;a href="#" target="_blank" id="feedback-link"&gt;Feedback&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>