width = 100% not properly working in IE, Microsoft edge browser - html

Question

enter image description hereI am facing some strange problem in edge and all other IE versions.The problem is that I declare a div and set some property on that div.Initially I set width: 1140px but when the screen resize to its max-width: 1200px I set the div width:100%.All this changes are working perfectly in chrome,firefox,opera,safari but when I test this code in edge or any IE versions it takes too much space on the right side of the device screen.
header{
width: 100%;
height: 500px;
position: relative;
}
.beast-text-box {
position: absolute;
width: 1140px;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
#media only screen and (max-width: 1200px) {
.beast-text-box {
width: 100%;
}
}
<header>
<div class="beast-text-box">
<h1 class="heading-h1">TRAIN LIKE A BEAST</h1>
BEAST MODE
SHOW ME MORE
</div>
</header>

Answer 1

transform is causing issue in IE. Try below CSS to .beast-text-box in media.
position: relative;
left: 0;
transform: translate(0);
header {
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
.beast-text-box {
position: absolute;
max-width: 1140px;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
#media only screen and (max-width: 1200px) {
.beast-text-box {
width: 100%;
/*Added this CSS*/
position: relative;
left: 0;
transform: translate(0);
/*Added this CSS*/
}
}
<header>
<div class="beast-text-box">
<h1 class="heading-h1">TRAIN LIKE A BEAST</h1>
BEAST MODE
SHOW ME MORE
</div>
</header>

Answer 2

I made the following changes and it started working! There a semi-colon missing in header CSS and instead of width: 1140px; i changed to max-width: 1140px;. What i guess happend is, left: 50% and width: 1140px together are adding to the total width and forcing the horizontal scrollbar to show up in IE11.
header{
width: 100%;
height: 500px;
position: relative;
overflow:hidden;
}
.beast-text-box {
position: absolute;
max-width: 1140px;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
#media only screen and (max-width: 1200px) {
.beast-text-box {
width: 100%;
}
}
<header>
<div class="beast-text-box">
<h1 class="heading-h1">TRAIN LIKE A BEAST</h1>
BEAST MODE
SHOW ME MORE
</div>
</header>