CSS3 conversion doesn't render well in Microsoft Edge (and IE)

Question

Pretty new web developer here. So I have a switch to CSS3 on my Wordpress site, which works fine in every browser, but IE and Edge. Not sure exactly what to do with this, as I have a hard time checking it out on my Mac.

Here are snippets that can influence things. The first one begins with a 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;

}

Indeed, only

---

#line is the one I'm having problems with. Perhaps this is due to the fact that the fields act differently with the edge, etc. I know that the resume on the site does not display the center on the page. I put the site in a subdirectory if you want to see it.

Answer 1

html. , .. div jumbotron p- col-md-4 col-md-offset-7. div col-md-4

, margin-left. #jumbotron , #jumbotron . , , , 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%;
  }
}