Galliger Galliger - 24 days ago 12
CSS Question

Why is my bootstrap overlapping?

Hello I am just making a base template to help me make a website a lot better, I have just recently started using bootstrap and have noticed that when I resize my browser (for example to a mobile size) it is overlapping on my footer?

Does anyone know why this is happening?

Here are some images of when I add more text or resize:
enter image description here
enter image description here

Like I say I am fairly new to bootstrap and am most likely doing something really stupid which is easy to fix :)

Here is my css:

html, body { height:100% }

nav {
margin: 0;
padding: 0;
}

div {
display: block;
}

.col-centered {
float: none;
margin: 0 auto;
}

.center {
margin-left:auto;
margin-right:auto;
margin: 0 auto;
}

.left {
float: left;
}

.right {
float: right;
}

.container {
width: 100%;
margin: 0;
padding: 0;
height:100%;
background:red;
}

.content {
padding: 5rem 1.5rem;
text-align: left;
height:90%;
width:75%;
margin:0 auto;
background: green;

}

footer {
background: grey;
height:10%;
width:75%;
margin:0 auto;
}


Here is my main HTML:

<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Text would go here...</p>
</div>
</div>
</div>
<?php include "footer.php" ?>


EDIT: I forgot to include the footer, if you think that I need to add this for you then please let me know.

Thank you very much for even looking at this post!

EDIT 2:
Here is the code for my footer:

<footer>
<div class="row">
<div class="col-md-auto">
<p class="float-right"><a href="#">Back to top</a></p>
<p>&copy; 2017 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</div>
</div>
</footer>


Here is the link to the website:
http://81.131.193.35/

Answer Source

Remove the height of .content

.content {
    padding: 5rem 1.5rem;
    text-align: left;
    width: 75%;
    margin: 0 auto;
    background: green;
}

and also remove the height of .container

.container {
    width: 100%;
    margin: 0;
    padding: 0;
    background: red;
}