Я использую отзывчивый нижний колонтитул flexbox, который отлично работает сам по себе на codepen, но не заполняет экран, когда я добавляю его в свой код, я многое изменил, но он по-прежнему не заполняет экран, это по-прежнему показывает левую и правую границу. я думаю, что-то перекрывает нижний колонтитул css. 
body {
font-family: Assistant;
background: url('vector 1.png') no-repeat right top #D2F4E0;
color: black;
}
.container {
max-width: 1005px;
margin: 0 auto;
padding: 2em 1 em;
}
.header {
text-align: center;
}
#navy-logo {
width: 180px;
}
nav {
margin: 2em auto 0;
max-width: 600px;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav ul li {
list-style: none;
}
nav ul li a {
font-size: 1.25em;
color: black;
font-weight: 700;
text-decoration: none;
}
main {
display: flex;
flex-flow: column;
}
.hero {
text-align: center;
}
.hero h1 {
font-size: 2.5 em;
font-weight: 700;
color: #056F5B;
}
.hero p {
font-size: 1.2 em;
font-weight: 600;
max-width: 500px;
line-height: 1.8em;
margin: 3em auto;
}
.hero p:before {
content: "";
display: block;
width: 120px;
border: 2px solid #ffff;
margin 1em auto;
}
.hero a {
background: #1B7E43;
padding: 0.5em 2em;
border-radius: 9px;
color: white;
text-decoration: none;
font-size: 1.375em;
font-weight: 700;
}
figure {
text-align: centre
}
figure img {
margin: 3em auto 0;
width: 300px;
}
@media screen and (min-width:820px) {
header {
display: flex;
justify-content: space-between;
flex-flow: wrap;
align-self: center;
}
nav {
margin: 0;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
list-style: none;
padding: 0.5em 2em;
}
nav ul li a {
font-size: 1.375em;
color: black;
font-weight: 700;
text-decoration: none;
}
.wakee {
border: 3px solid rgb(55, 255, 98);
border-radius: 10px;
}
main {
flex-flow: row;
}
.hero {
text-align: left;
}
.hero h1 {
font-size: 4em;
}
.hero p:before {
margin: 1em 0;
}
.hero p {
font-size: 1.3em;
padding: 0;
margin: 0 0 3em 0;
color: black;
}
.hero a {
background: #;
}
}
}
/
/* FOOTER */
* {
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
footer {
background-color: #F3F8F5;
line-height: 1.5;
}
footer a {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
}
.ft-title {
color: #333;
font-family: "Merriweather", serif;
font-size: 1.375rem;
padding-bottom: 0.625rem;
}
/* Sticks footer to bottom */
.containeer {
flex: 1;
}
/* Footer main */
.ft-main {
padding: 1.25rem 1.875rem;
display: flex;
flex-wrap: wrap;
}
@media only screen and (min-width: 29.8125rem/* 477px */
) {
.ft-main {
justify-content: space-evenly;
}
}
@media screen and (min-width:820px) {
.ft-main {
justify-content: space-evenly;
}
}
.ft-main-item {
padding: 1.25rem;
min-width: 12.5rem;
}
/* Footer main | Newsletter form */
form {
display: flex;
flex-wrap: wrap;
}
input[type="email"] {
border: 0;
padding: 0.625rem;
margin-top: 0.3125rem;
}
input[type="submit"] {
background-color: #00d188;
color: #fff;
cursor: pointer;
border: 0;
padding: 0.625rem 0.9375rem;
margin-top: 0.3125rem;
}
/* Footer social */
.ft-social {
padding: 0 1.875rem 1.25rem;
}
.ft-social-list {
display: flex;
justify-content: center;
border-top: 1px #777 solid;
padding-top: 1.25rem;
}
.ft-social-list li {
margin: 0.5rem;
font-size: 1.25rem;
}
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="newcss.css" rel=" stylesheet ">
<link href="https://fonts.googleapis.com/css?family=Assistant&display=swap" rel="stylesheet">
</head>
<body>
<header class="container">
<div class="logo"></div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sign up</a></li>
<li><a href="#">Login</a></li>
<li class="wakee"><a href="#">Get Started</a></li>
</ul>
</nav>
</header>
<main class="container">
<section class="hero container">
<h1>website test code test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum suspendisse venenatis nibh nibh cras. Et porttitor amet ac iaculis pharetra. Eu sagittis adipiscing etiam tellus feugiat quis cursus cras orci.</p>
<a href="#">Get Started</a>
</section>
<div class="device">
<figure>
<img src="Vectord.svg" class="svgtest" alt=" logo">
</figure>
</div>
</main>
<div class="containeer"></div>
<footer>
<!-- Footer main -->
<section class="ft-main">
<div class="ft-main-item">
<h2 class="ft-title">About</h2>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="ft-main-item">
<h2 class="ft-title">Resources</h2>
<ul>
<li><a href="#">Docs</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">eBooks</a></li>
<li><a href="#">Webinars</a></li>
</ul>
</div>
<div class="ft-main-item">
<h2 class="ft-title">Contact</h2>
<ul>
<li><a href="#">Help</a></li>
<li><a href="#">Sales</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</div>
<div class="ft-main-item">
<h2 class="ft-title">Stay Updated</h2>
<p>Subscribe to our newsletter to get our latest news.</p>
<form>
<input type="email" name="email" placeholder="Enter email address">
<input type="submit" value="Subscribe">
</form>
</div>
</section>
<!-- Footer social -->
<section class="ft-social">
<ul class="ft-social-list">
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-github"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</section>
</footer>
</body>
</html>