Setting modals size to 100% - html

Question

I have created a modal inside a button-container which utilizes some flex display elements.
The problem occurs when I want to size the .modal-mask to a 100% of width/height to the whole page (body) size which is my goal here, I can't seem to get it to adjust properly without disturbing my button-container elements.
In short, I want the inner div .modal-mask to be sized 100% to the body
Project Fiddle: https://jsfiddle.net/est857q0/
HTML:
<ul id="button-container">
<li>
<a id="html-modal-button" #click="showModal = 'html-modal'">
<img class="htmllogo" src="http://sweettutos.com/wp-content/uploads/2015/12/placeholder.png">
</a>
<htmlmodal v-if="showModal === 'html-modal'" #close="showModal = false"></htmlmodal>
</li>
<li>
<a id="cs-modal-button" #click="showModal = 'cs-modal'">
<img class="csharplogo" src="http://sweettutos.com/wp-content/uploads/2015/12/placeholder.png">
</a>
<csmodal v-if="showModal === 'cs-modal'" #close="showModal = false"></csmodal>
</li>
</ul>
<!-- MODAL SECTION -->
<script type="text/x-template" id="html-modal-template">
<transition name="html-modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-content">
<slot name="body">
<button class="modal-default-button" #click="$emit('close')">HTML CLOSE</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<script type="text/x-template" id="cs-modal-template">
<transition name="cs-modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-content">
<slot name="body">
<button class="modal-default-button" #click="$emit('close')">CS CLOSE</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
CSS:
/*Global*/
html {
margin-right: calc(100% - 100vw);
/*overflow: hidden;*/
}
body {
margin: 0 auto;
background-image: url('../images/wallpaper.jpg');
font-family: 'Josefin Sans', sans-serif;
}
*::selection {
background-color: red;
}
/*Header*/
h1 {
text-transform: uppercase;
width: 100%;
font-size: 9vw;
text-align: center;
margin-top: 4vh;
}
/*Containers*/
#button-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
margin-top: 40vh;
margin-left: 50vw;
transform: translate(-50%, -70%);
width: 90vw;
height: 45vh;
align-items: baseline;
background: linear-gradient(to right, transparent 0%, #fff 33%, #fff 66%, transparent 100%);
}
#button-container li {
position: relative;
display: inline-block;
cursor: pointer;
}
#button-container .html-text-block,
.cs-text-block {
position: absolute;
bottom: 4px;
width: 100%;
height: 30%;
box-sizing: border-box;
background-color: #fff;
padding-left: 5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: box-shadow 0.5s cubic-bezier(.25, .8, .25, 1), transform 0.5s cubic-bezier(.25, .8, .25, 1);
}
#button-container .htmllogo,
#button-container .csharplogo {
width: 150px;
}
#button-container {
border: 1px solid #000;
}
img:hover {
transform: scale(1.1);
}
/* THE MODAL CSS SECTION */
/*Main Modal container*/
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-content {
margin: 20px 0;
}
I attempted to set the button-container too 100% : https://jsfiddle.net/est857q0/ yet this messes up the flow