CSS: position: fixed and width 90% too wide - css

Question

i'm using position: fixed and width 90% for a footer inside a overlay. The overlay and the footer are both 90% wider but the footer is wider. I guess it's because the footer ignores the scrollbar in chrome. Is there a way to solve this problem without JavaScript?
Here is quick example: https://jsfiddle.net/a15kpuL9/3/
The HTML:
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFooter">
</div>
</div>
</div>
</div>
</div>
The CSS:
.stickyFooter {
width: 90%;
text-align: center;
position: fixed;
bottom: 0;
height: 150px;
background-color: #F5F5F5;
}
.body {
text-align: left;
-webkit-box-shadow: -7px 0 31px 3px rgba(0, 0, 0, 0.16);
display: inline-block;
background-color: white;
border-radius: 10px;
margin-top: 150px;
width: 90%;
}
The Problem:

Answer 1

change the 90% to 90 vw instead. Here you go. :)
.stickyFooter {
width: 90vw;
text-align: center;
position: fixed;
bottom: 0;
height: 150px;
background-color: red;
}
.body {
text-align: left;
-webkit-box-shadow: -7px 0 31px 3px rgba(0, 0, 0, 0.16);
display: inline-block;
background-color: white;
border-radius: 10px;
margin-top: 150px;
width: 90vw;
}
.container {
text-align: center;
vertical-align: middle;
overflow-y: scroll;
height: 100%;
display: block;
width: 100%;
position: absolute;
right: 0;
left: 0;
margin: 0 !important;
max-width: 100%;
padding: 0;
}
.career-detail-inner-wrap {
background: green;
height: 800px
}
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap">
Inner
<div class="stickyFooter">
Sticky
</div>
</div>
</div>
</div>
</div>

Answer 2

I see one less closing div , could that be the problem
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
</div>
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFoooterSecond">
</div>
</div>
</div>
</div>
or
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFoooterSecond">
</div>
</div>
</div>
</div>
</div>