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 i:

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!