Div overlap of another div - html

Question

I have been trying to solve a problem that I have on a website that I am building. The website displays correctly on a desktop browser when it is normal size, but when you make the browser window small or view the site on a mobile phone, I have a layer that overlaps with the footer div on the page.
Please look at this image of the problem:
The layer with the div that overlaps my footer has a class of logodiv, here is my css code for it:
.logodiv{
text-align: center;
top: 50%;
transform: translateY(-50%);
font-family: 'Quicksand', sans-serif;
font-size: 20px;
display: block;
}
The heading has a ID name of logoheadline and has the following css
#logoheadline{
font-family: 'Anton', sans-serif;
font-size: 58px;
position: relative;
}
Lastly my footer has a class name of footerz and it has the following css:
.footerz{
background-color: #323232;
min-height: 200px;
color: white;
font-family: 'Quicksand', sans-serif;
}
the intro-p div has the following css:
.intro-p{
font-family: 'Quicksand', sans-serif;
font-size: 20px;
position: relative;
}
this is the html I have:
<section id="section01" class="demo">
<div class="col-md-12" id="main-bd">
<div class="col-md-4 col-md-offset-1 logodiv" >
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive center-block" src="images/activities.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/chat.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/map.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/hot.png" height="470" width="245" alt="Activities">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class=" col-md-6 logodiv" >
<br>
<h1 id="logoheadline">Getting together has never been easier! </h1>
<p class="intro-p">Create events and activities, find hot new places to visit, see where your friends hang out all from within the spaze app!</p>
<button class="gbtnHollow">Download</button><br><br><br>
</div>
<span></span>
</div>
</section>
<section id="section02" class="demo2">
<div class="container-fluid footerz">
<div class="col-md-2">
<br>
<ul id="footerul">
<li><a href='privacy.html'>Privacy Policy</a></li>
<li><a href='terms.html'>Terms & Conditions</a></li>
<li><a href='#'>Ads</a></li>
</ul>
</div>
<div class="col-md-4">
<br>
<div class="col-md-4 col-md-offset-2">
<ul id="footerul">
<li>Contact Us</li>
<li><a href='#'>Our Story</a></li>
<li><a href='#'>Press Kit</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<br>
<div class="col-md-12 ">
<ul id="footerul">
<li><a href='#'>Jobs</a></li>
<li><a href='#'>Angel Investors</a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<br>
<!--This is where all the social media buttons need to go.-->
<ul class="list-inline" >
<li> <img src="./images/facebook.png" alt="Facebook" width="35" height="35"> </li>
<li> <img src="./images/instagram.png" alt="Instagram" width="35" height="35"> </li>
<li> <img src="./images/twitter.png" alt="Instagram" width="35" height="35"> </li>
</ul>
</div><br>
<div class="col-md-12" style="text-align: center;">
<br>
</div>
</div>
</section>
I have been scratching my head for a while, can someone tell me what are my missing?

Answer 1

Remove that top :50% from your logindiv. top is used with position property of Css that may have created problem in your code. Basically avoid using position forcefully. Use them where when it is required.

Answer 2

You are using col-md- class only , that's why you have faced this issues, you can simply fix this you can add col-xs- classes instead of col-md- class , after 1200px col-md- classes getting 100% width