I'm currently working on a Bootstrap 3 page and facing an issue where the yellow area does not seamlessly transition into the green footer. Instead, there is a white space between the end of the yellow area and the start of the footer. How can I resolve this problem?
Here's the code for the yellow area:
<div class="jumbotron container-home-2" >
<font color = "#FF8017">
<center>
<h2>Answer a survey here</h2>
<form role="form">
<div class="container">
<div class="col-md-4">
</div>
<div class="col-md-4">
<div class="form-group">
<center><br>
<input class="from-control input-home" type="text" placeholder="Enter your survey code here" required autofocus>
</center>
<center>
<button type="submit" placeholder="Enter your survey code here" class="btn btn-default"><h4>Go to survey</h4></button>
</h4>
</center>
</form>
</div>
<div class="col-md-4">
</div>
</div>
</form>
</font>
</center>
</div>
CSS code for the yellow area:
.container-home-2 {
background-color:#FFE700;
border-radius: 6px;
margin-bottom: 20px;
padding-bottom: 20px;
}
HTML code for the footer:
<footer class="footer-base panel-footer jumbotron">
<font color=#ffffff><center>© Company 2013</center></font>
</footer>
CSS code for the footer:
.footer-base {
background-color:#005200;
border-radius: 6px;
position: relative;
margin-top:150px;
clear:both;
padding-top: 20px;
}