CSS3 transform not displaying well in Microsoft Edge (and IE) - html

Question

Fairly new web developer here. So I have a CSS3 transition on my wordpress site which works fine in every browser but IE and Edge. Not sure exactly what to do about it also since I am not easily able to test it on my mac.
Here are the snippets that may be effecting things. The first is starting them off the page.
.jumbotron #name {
margin-left:-200em;
}
.jumbotron #line {
margin-left:-80em;
}
.jumbotron #occupation1, .jumbotron #occupation2 {
margin-left:-190em;
}
#-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(42%, 0, 0);
transform: translate3d(42%, 0, 0);
}
}
#keyframes slideInLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(42%, 0, 0);
transform: translate3d(42%, 0, 0);
}
}
#-webkit-keyframes slideInLeftLine {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(315%, 0, 0);
transform: translate3d(315%, 0, 0);
}
}
#keyframes slideInLeftLine {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(315%, 0, 0);
transform: translate3d(315%, 0, 0);
}
}
#-webkit-keyframes slideInLeft2 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(43%, 0, 0);
transform: translate3d(43%, 0, 0);
}
}
#keyframes slideInLeft2 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(43%, 0, 0);
transform: translate3d(43%, 0, 0);
}
}
#-webkit-keyframes slideInLeft3 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(45%, 0, 0);
transform: translate3d(45%, 0, 0);
}
}
#keyframes slideInLeft3 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(45%, 0, 0);
transform: translate3d(45%, 0, 0);
}
}
.slideInLeft3 {
-webkit-animation-name: slideInLeft3;
animation-name: slideInLeft3;
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
.slideInLeft2 {
-webkit-animation-name: slideInLeft2;
animation-name: slideInLeft2;
}
.slideInLeftLine {
-webkit-animation-name: slideInLeftLine;
animation-name: slideInLeftLine;
}
#name {
opacity:1;
animation: slideInLeft 2s 1;
-webkit-animation: slideInLeft 2s 1;
-moz-animation: slideInLeft 2s 1;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
#line {
opacity:1;
animation: slideInLeftLine 2s 1;
-webkit-animation: slideInLeftLine 2s 1;
-moz-animation: slideInLeftLine 2s 1;
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 2s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
#occupation2 {
animation: slideInLeft3 2s 1;
-webkit-animation: slideInLeft3 2s 1;
-moz-animation: slideInLeft3 2s 1;
-webkit-animation-delay: 5s; /* Chrome, Safari, Opera */
animation-delay: 5s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
#occupation1 {
animation: slideInLeft2 2s 1;
-webkit-animation: slideInLeft2 2s 1;
-moz-animation: slideInLeft2 2s 1;
-webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
animation-delay: 3s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
Really just the #line is the one that I am having trouble with. It could possibly be because the margins function differently with edge and ie? I know that the resume's on the site are not displaying center in the page either. I put the site up on a sub directory incase you want to see it.

Answer 1

For starters one major issue is your html. You have extra anonymous closing tags i.e. extra closing div in jumbotron and a random closing p tag in col-md-4 col-md-offset-7. I just removed the col-md-4 divs altogether
I also don't know why you are using margin-left. I personally would scrap using margin left and use absolute positioning on the items inside #jumbotron and make sure #jumbotron is relatively positioned. You will have to mess with the positions to get what you want, but this works in IE.
Html:
<div class="jumbotron">
<div id="name">
<h2>Joseph Scalzo</h2>
</div>
<div id="line"></div>
<h3 id="occupation1">Performer.</h3>
<h3 id="occupation2">Sommelier.</h3>
</div>
<main role="main">
<!-- section -->
<section>
<!-- article formerly with class bigboy -->
<article id="post-2" class="post-2 page type-page status-publish hentry">
<div class="container" id="hide" style="height:0; width:0;">
<figure>
<img src="http://joebiz.net/blog/wp-content/uploads/2015/09/jumbotron.jpg" alt="headshot1"/><br />
</figure>
<div class="col-md-4 col-md-offset-7">
<h2>Joseph Scalzo</h2>
<hr id="fixedLine">
<h3>Performer. Sommelier.</h3>
</div>
</div>
<br class="clear">
</article>
<!-- /article -->
</section>
<!-- /section -->
</main>
Css:
.jumbotron {
position: relative;
}
.jumbotron h2 {
font-size:4em;
font-family: 'Raleway', Tahoma, sans-serif;
color:#f3e877;
}
.jumbotron h3 {
font-family: 'Raleway', Tahoma, sans-serif;
color:black;
}
.jumbotron #name {
position: absolute;
top: 100px;
width: 375px;
}
.jumbotron #line {
border-bottom: 1px solid #fff;
height: 1px;
position: absolute;
top: 172px;
left: -100%;
width: 375px;
}
.jumbotron #occupation1 {
position: absolute;
top: 180px;
left: -100%;
width: 375px;
}
.jumbotron #occupation2 {
position: absolute;
top: 220px;
left: -100%;
width: 375px;
}
#-webkit-keyframes slideInLeft {
from {
left: -100%;
}
to {
left: 60%;
}
}
#keyframes slideInLeft {
from {
left: -100%;
}
to {
left: 60%;
}
}
#-webkit-keyframes slideInLeftLine {
from {
left: -100%;
}
to {
left: 60%;
}
}
#keyframes slideInLeftLine {
from {
left: -100%;
}
to {
left: 60%;
}
}
#-webkit-keyframes slideInLeft2 {
from {
left: -100%;
}
to {
left: 68%;
}
}
#keyframes slideInLeft2 {
from {
left: -100%;
}
to {
left: 68%;
}
}
#-webkit-keyframes slideInLeft3 {
from {
left: -100%;
}
to {
left: 72%;
}
}
#keyframes slideInLeft3 {
from {
left: -100%;
}
to {
left: 72%;
}
}