How to maintain styles across browsers? - html

Question

I've got a ul, in Chrome it maintains its size relative to its container and scales, in IE it doesnt scale instead acting like theres no css.
The second photo is how it looks at full screen, the first photo is how it looks after scaling however when scaling in IE it continues to look like the second photo.
I thought this was because of Flexbox but as you can see every prefix I can think of has been applied.
I've can a number of compatibility checks and it looked like the issue was the use of rem but changing this to % or pixel doesn't change a thing.
Every other section of the sites is compatible across all browsers and scales fine even on mobile devices.
I haven't applied a style to this that isn't used in any of the other sections so this literally makes no sense to me.
Any help would be appreciated.
#skills {
height: 40rem;
padding-top: 2rem;
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
color: #000;
background-color: rgba(27, 28, 28, 0.5);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#lang {
height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-top: 3%;
}
#bar {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-ms-flex-direction: column;
align-items: flex-start;
-webkit-box-align: flex-start;
-moz-box-align: flex-start;
-ms-flex-align: flex-start;
-webkit-align-items: flex-start;
margin-left: 30px;
}
<div id="lang">
<ul id="bar">
<li class="bars"><span class="bartxt">HTML 5</span></li>
<li class="bars"><span class="bartxt">CSS 3</span></li>
<li class="bars"><span class="bartxt">Git</span></li>
<li class="bars"><span class="bartxt">Responsive design</span></li>
<li class="bars"><span class="bartxt">Unicycling</span></li>
</ul>
</div>