When I resize, my Main section overlaps my Latest section. I don't know what is causing this, and I hope someone can finally end my misery already.
.l-latest {
margin-bottom: $theme-margin;
margin-top: 0;
height: 270px;
}
.latest-item {
height: 270px;
}
.last-item h2 {
line-height: 270px;
}
<!-- LATEST -->
<section class="latest l-latest">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="latest-item">
<a href=""><h2>READ OUR REVIEWS</h2></a>
</div>
</div>
<div class="col-md-4">
<div class="latest-item">
<a href=""><h2>UPCOMING EVENTS</h2></a>
</div>
</div>
<div class="col-md-4">
<div class="latest-item">
<a href=""><h2>LATEST PHOTOS</h2></a>
</div>
</div>
</div>
</div>
</section>
<!-- MAIN -->
<section class="main l-main">
<div class="container">
<div class="row">
<div class="col-md-8">
<h2>LATEST POTSTS</h2>
<hr>
<a href=""><img src="images/post1.jpg" alt=""></a>
<h2>What happend last friday</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in...read more <i class="fa fa"></i></p>
<ul class="author">
<li><i class="fa fa"><a href="#">Vlad</a></i></li>
<li><time>August 13th, 2015</time></li>
<li><i class="fa fa"><a href="#">0 Comments</a></i></li>
</ul>
</div>
</div>
</div>
</div>
</section>
It happens because .l-latest has a fixed height of 270px. In 'smartphone/tablet mode' your div's are being stacked up, that means they're 3*270px in height (=810px), but l-latest covers just 270px.
Remove 270px from .l-latest or add a media query to set height: auto on .l-latest.