[HELP]Website layout not positioning right : I am trying to make a template for my website from scratch and everything was going good until I wanted to make a news bar underneath my navbar and welcome message bar. For some reason the spot that would be for news goes above the navbar and I can't figure out why!
[Screenshot of what my webpage looks like.][1]


  [1]: https://i.stack.imgur.com/iOA2Q.png

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    body {
    	margin: 0;
    	background: #0e0e0f;
    	font-family: Impact;
    	font-size: 22px;
    }

    #navbar{
    	text-align: left;
    	margin-top: 55px;
    }

    #navbar ul li{
    	display: inline;
    	text-align: center;
    }


    #navbar ul li{
        margin: 10px;
        color:rgba(255, 255, 255, 0.2);
        text-transform: uppercase;
    }

    #navbar ul li a{
        text-decoration: none;
    }

    #navbar ul li a:hover{
    	color: yellow;
    }
    #navbar ul li a:visited{
        text-decoration: none;
        color:rgba(255, 255, 255, 0.2);
    }
    #navbar ul li a:visited:hover{
        text-decoration: none;
        color: yellow;
    }

    #top-container{
    	margin: 0;
    	background: black:;
    	background: linear-gradient(black, grey);
    	width: 100%;
    	height: 650px;
    	background-position: center;
    	background-repeat: no-repeat;
    	background-size: cover;
    	position: absolute;
    }

    #welcome-message{
    	margin: 250px 150px 100px 300px;
    	color: white;
    }

    .main-content{
    	width: 100%;
    	height: 650px;
    	background: #1f1f21;
    	background-size: cover;
    	margin-top: 700px;
    }



<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
      <title>Placeholder</title>
      <link rel="stylesheet" type="text/css" href="styles.css"/>
    </head>
    <body>
    	<div id="top-container">
    	<nav id="navbar">
    	  <ul>
    	    <li><a href="#Home" class="active">Place Holder</a></li>
    	    <li><a href="#">Place Holder</a></li>
    	    <li><a href="#">Place Holder</a></li>
    	    <li><a href="#">Place Holder</a></li>
    	    <li><a href="#">Place Holder</a></li>
    	    <li><a href="#">Place Holder</a></li>
    	  </ul>
    	</nav>
    		<h1 id="welcome-message">Welcome to<br>
    		Place holder!</h1>
    	</div>
    		<div class="main-content">
    			<h1>News Placeholder</h1></div>

      </div>
    </body>
    </html>

<!-- end snippet -->

