html - 网站出现黑色区域

我希望我可以在堆栈溢出中发布这样的问题
这是我第一次尝试投资组合！我正在尝试创建一个作品集，到目前为止，这是一个非常不错的学习限制，并且即使我还有很多东西需要学习，我仍然希望继续将网页设计作为载体。
所以我的问题是...我的页脚上方有一个黑色区域，不知道如何解决？
有人可以帮忙吗？
对不起，代码量。
不确定如何将图标字体应用于代码段，以便它们看起来像中文，抱歉:)
该代码段是我尝试添加到导致问题的网站的3列代码
Codepen是产品组合

/*--------------------
Content Start
--------------------*/
#content-container {
position: relative;
overflow: hidden;
width: 900px;
height: 300px;
background: #D5D5D5;
  margin: auto;
  top: 210px; left: 0; bottom: 0; right: 0;


}

	.container > div {
		border: 5px solid #fff;
		box-sizing: border-box;
		padding: 1em;
	}

		.main{
			background: #F29C9C;
		}
		.c2 {
			background: #F3E59A;
		}
		.c3 {
			background: #9FE0F6;
		}

	@media screen and (min-width: 768px) {

			.main {
				width: 50%;
				float: left;
				margin-left: 25%;
			}
			.c2 {
				width: 25%;
				float: left;
				margin-left: -75%;
		  	}
		  	.c3 {
		  		width: 25%;
				float: right;
		  	}
		}
/*--------------------
Content End
--------------------*/

<div class="pattern">
  	<div class="container">
	    	<div class="main">
			      <h2>Main Content (1st)</h2>
			      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi.</p>
		    </div>
    <div class="c2">
			      <h3>Column (2nd)</h3>
			      <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
		    </div>
		    <div class="c3">
			      <h3>Column (3rd)</h3>
			      <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
    		</div>
	  </div>
</div>

https://codepen.io/trigg/pen/OXxmrk

当浏览器宽度缩小时，将出现黑色区域​​。

最佳答案

问题是页脚的top: 210px;和身体的margin : 0 0 150px;

因此，要解决此问题，请插入一个共振的CSS代码：

@media screen and (max-width: 900px) {
    body{
        margin: 0;
    }
    #footer {
        top: 0px;
    }
}

现在，对于小于900像素的屏幕，旧的CSS值将被删除。