CSS - Container spreading across the page - html

Question

I have a section at the top of my site which contains a background image and text with a black strip at the bottom for the ability to embed video etc (see more / see our showreel) in the future. I've just altered some styling and now the black strip won't stretch across the whole page. It worked before now it doesn't work and I can't get it to go back. Can anyone see what might be causing this?
body {
font-family: "Merriweather Sans", sans-serif !important;
font-size: 16px !important;
line-height: 1.5 !important;
color: #333333;
}
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px !important;
padding-right: 10px !important;
}
section#topimageagency {
height: 400px;
background: url('http://localhost:8888/wp-content/uploads/2017/07/VIDEO.jpg') center center no-repeat;
background-size: 100%;
background-position: center;
overflow: hidden;
position: relative;
}
section#topimageagency .showreel {
height: 50px;
max-width: 100% !important;
position: absolute;
background-color: black;
bottom: 0;
padding: 0 30px;
justify-content: space-between !important;
}
section#topimageagency .showreel, .showreel > div.seemore {
display: flex;
align-items: center !important;
justify-content: flex-start !important;
flex:1;
}
section#topimageagency .showreel, .showreel > div.seeour {
justify-content: flex-end;
flex:1;
display: flex;
align-items: center;
}
section#topimageagency .showreel p {
font-size: 15px;
font-weight: normal;
margin: 0;
padding-left: 10px;
color: #ffffff;
}
.showreel i {
color: #ffffff;
}
.seemore {
margin-left: 30px !important;
}
.seeour i {
margin-right: 30px !important;
}
#topimageagency a {
text-decoration: none;
color: #FFFFFF;
/* position: static; */
float: right;
background-color: #000000;
padding:5px;
padding-left:10px;
padding-right: 10px;
width:auto;
white-space: nowrap;
}
section#agency .text {
float: left !important;
margin-top: 50px;
margin-bottom: 50px;
left: 100px;
}
.text p {
font-size: 10px;
color: #FFFFFF;
}
.text h1, h2 {
color: #FFFFFF;
margin: 0;
padding: 0;
border: 0;
}
.text h2 {
line-height: 5px;
font-size: 25px;
font-weight: 200;
}
.text h1 {
font-size: 50px;
margin-bottom: 40px;
}
<section id="topimageagency">
<div class="container">
<a href="http://localhost:8888/products/">
I'm a business
</a>
<div class="text">
<h2>VIDEO & ANIMATION</h2>
<h1>FOR AGENCY</h1>
<p><?php the_field('agency_img_paragraph'); ?></p>
</div>
</div>
<div class="container showreel">
<div class="seemore">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
<i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
</span>
<p>SEE MORE</p>
</div>
<div class="seeour">
<p>SEE OUR SHOWREEL</p>
<i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
</div>
</div>
</div>
</section>

Answer 1

Give the strip a width: 100%; attribute

Answer 2

For bottom strip to be acroos whole page:
.showreel{
width:100vw;
}