Looking at the image, I need the div above the footer to be flush with it. I've tried various solutions and need help from someone with more experience. Here is the HTML and CSS code for reference. Illustration link
HTML and CSS
.content{
margin:0;
width: 100%;
/*padding-top:30px;*/
/*padding-left: 3px;*/
/*padding-right: 0px;*/
/*padding-bottom: 60px;*/
font-family: 'Lato', sans-serif;
}
#footer{
height:200px;
/*width:100%;*/
background:#1c1c1c;
text-align: center;
padding-top:69px;
padding-bottom: 69px;
}
.post_date{
padding:20px 0;
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
width:100%;
color:#dbdbdb;
}
.card{
width:100%;
height:379.6px;
/*background: red;*/
/*padding-left: 2px;*/
}
/*Card 6 properties*/
#c6{
background: #9b59b6;
}
#c6 h3{
color:white;
}
.b6,.s6{
color:white;
}
/**********/
img{
width:100%;
margin: 0px;
}<section id="section-6" class="grid">
<div class="images img6">
<img src="images/pic12.jpg">
</div>
<div class="card" id="c6">
<div class="content">
<header>
<h3>Magna porta aliguam</h3>
</header>
<p class="post_date"> 3 days ago by <span class="s6">John Doe</span></p>
<p>
Nullam posuere erat vel placerat rutrum. Praesent ac consectetur dui, et congue quam. Donec aliquam lacinia condimentum. Integer porta massa sapien, commodo sodales diam suscipit vitae. Aliquam quis felis sed urna semper semper. Phasellus eu scelerisque mi. Vivamus aliquam nisl libero, sit amet scelerisque ligula laoreet vel.
</p>
<button class="btn b6"> Read More</button>
</div>
</div>
</section>
<footer id="footer">
<div id="social_media">
<ul>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
</ul>
</div>
<div class="copyright">
@Untitled Design. <a href="#">Templated:</a> Images: <a href="#"> Unsplash</a>
</div>
</footer>
</main>
</body>
</html>