https://jsfiddle.net/xaLsqfme/
The footer seems to be pushing the content to the top.
.my-footer {
box-sizing: border-box;
border-top: 1px solid #1155cc;
background: #121212;
text-align: center;
word-wrap: break-word;
margin: 0 -8px;
padding: 22px 8px 8px;
/*height:200px;
padding: 22px 0 0 0; height is used */
font-family: Verdana, Arial;
font-size: 13.33px;
line-height: 1.5;
vertical-align: baseline;
}
.my-footer a {
text-decoration: none;
}
.my-footer b {
width: 1px;
height: 12px;
background-color: #f6b26b;
position: relative;
top: 4px;
left: 0;
margin: 0 7.4px;
}
.footer-top {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 13px;
}
.footer-top a {
color: #0059dd;
font-weight: 700;
}
.my-footer .text5 {
color: #38761d;
font-weight: 400;
}
.text6 {
color: #b45f06;
font-weight: 700;
}
.footer-mid {
margin-bottom: 49px;
color: #0059dd;
font-family: Arial;
font-size: 24px;
font-weight: 700;
}
.footer-base {
color: #0059dd;
padding: 0 0 31px 0;
}
<div class="outer-container hide">
<div class="containerB">
<div class="modal-content">
<div class="buttonContainerA">
<button data-destination="#ba" class="playButton btn-primary btn">Listening</button>
<button data-destination="#bb" class="playButton btn-primary btn">Live Performance</button>
<button data-destination="#bc" class="playButton btn-primary btn">On Loop</button>
<button data-destination="#bd" class="playButton btn-primary btn">Audio Visual</button>
<button data-destination="#be" class="playButton btn-primary btn">Lyric Video</button>
<button data-destination="#bf" class="playButton btn-primary btn">Music Video</button>
<button data-destination="#bg" class="playButton btn-primary btn">From The Vault</button>
<button data-destination="#bh" class="playButton btnq">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 856 856">
<path fill="#000" d="M 856 0 H 856 V 856 H 0 L 0 0 H 856" />
<path fill="#1155cc" d="M79.4,816.3c-21,0-38-17-38-37.9c0-21.1,16.9-38.1,38-38.1c20.9,0,37.9,17,37.9,38.1
C117.3,799.3,100.4,816.3,79.4,816.3" />
<path fill="#1155cc" d="M79.4,115.7c-21,0-38-17-38-38s16.9-38,38-38c20.9,0,37.9,17,37.9,38S100.4,115.7,79.4,115.7" />
<path fill="#1155cc" d="M513.6,766.6c0,0.8-0.8,1.5-1.6,1.5H344.2c-0.8,0-1.5-0.7-1.5-1.5V658.2c0-0.9,0.7-1.7,1.5-1.7H512
c0.8,0,1.6,0.7,1.6,1.7V766.6z" />
<path fill="#1155cc" d="M722,403.4c0,0.4-0.2,0.7-0.4,1.1l-75.2,76.4c-0.4,0.3-0.8,0.4-1.2,0.4H532.1l-18.5,18.5v96.9
c0,1-0.8,1.7-1.6,1.7H344.2c-0.8,0-1.5-0.7-1.5-1.7V447.9c0-0.4,0.1-0.8,0.4-1.1l75.1-76.4c0.3-0.3,0.7-0.5,1.1-0.5h113.2
l18.6-18.6V239.7l-18.6-18.6H323.6l-18.5,18.6v113.5c0,0.8-0.7,1.5-1.5,1.5H135.8c-1,0-1.6-0.7-1.6-1.5V190.8c0-0.3,0.2-0.7,0.4-1
l77.1-79.6c0.3-0.3,0.7-0.4,1.2-0.4h430.5c0.4,0,0.8,0.2,1.2,0.4l76.9,79.6c0.2,0.2,0.4,0.7,0.4,1V403.4z" />
<path fill="#1155cc" d="M776.9,816.3c-20.9,0-38.2-17-38.2-37.9c0-21.1,17.2-38.1,38.2-38.1c20.9,0,38,17,38,38.1
C814.9,799.3,797.8,816.3,776.9,816.3" />
<path fill="#1155cc" d="M776.9,115.7c-20.9,0-38.2-17-38-38s17.2-38,38.2-38c20.9,0,38,17,38,38S797.8,115.7,776.9,115.7" />
</svg>
</button>
<button data-destination="#bi" class="playButton btn-primary btn">Cover</button>
<button data-destination="#bj" class="playButton btn-primary btn">Remix</button>
<button data-destination="#bk" class="playButton btn-primary btn">Instrumental</button>
<button data-destination="#bl" class="playButton btn-primary btn">Extended Mix</button>
<button data-destination="#bm" class="playButton btn-primary btn">Duet</button>
<button data-destination="#bn" class="playButton btn-primary btn">Acoustic</button>
<button data-destination="#bo" class="playButton btn-primary btn">Rework</button>
</div>
<button class="exitB exit" type="button" title="Exit" aria-label="Close"></button>
</div>
<div id="ba" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonA"></div>
</div>
<div class="buttonA"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bb" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonB"></div>
</div>
<div class="buttonB"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bc" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonC"></div>
</div>
<div class="buttonC"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bd" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonD"></div>
</div>
<div class="buttonD"></div>
<div class="curtainB"> </div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="be" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonE"></div>
</div>
<div class="buttonE">
</div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bf" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonF"></div>
</div>
<div class="buttonF"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bg" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonG"></div>
</div>
<div class="buttonG"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bh" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonH"></div>
</div>
<div class="buttonH"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bi" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonI"></div>
</div>
<div class="buttonI"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bj" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonJ"></div>
</div>
<div class="buttonJ"></div>
<div class="curtainB"> </div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bk" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonK"></div>
</div>
<div class="buttonK"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bl" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonL"></div>
</div>
<div class="buttonL"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bm" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonM"></div>
</div>
<div class="buttonM"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bn" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonN"></div>
</div>
<div class="buttonN"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bo" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonO"></div>
</div>
<div class="buttonO"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
</div>
<div class="containerC hide">
<div class="buttonContainerB"></div>
<div class="exitF">
<a href="" title="Exit" aria-label="Close"></a>
</div>
</div>
<footer class="my-footer">
<div class="footer-top">
<a href=" #" target="_blank">something</a><b></b>
<a href="#" target="_blank">something</a><b></b>
<a href="#" target="_blank"><span class="text5">something</span><span class="text6">something</span></a><b></b>
<a href="#" target="_blank">Feedback</a>
</div>
<div class="footer-mid">something</div>
<div class="footer-base">something</div>
</footer>
</div>