<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="robots" content="nofollow">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<style>
body{
  margin:0;
}

.WrapperWrapper{
  width:80%;
  margin-left:10%; 
  overflow: hidden;
  height: 25px;
  background-color: red;
  position: fixed;
}
.wrapper{
  position: relative;
  display: flex;
  flex-direction: row;
  width:200%;
  height:100%;
}

.marquee {
  width:100%;
  height:100%;

  overflow: hidden;
  position: relative;
  background-color: blue;
}

.marquee div {
  background-color: greenyellow;
  display: block;
  width: 200%;


  position: absolute;
  overflow: hidden;

  animation: marquee 8s linear infinite;
  display: flex;
  align-content: center;
  height:100%;

}

.marquee span {
  background-color: orange;
  float: left;
  width: 50%;
  display: flex;
  align-content: center;
  justify-content: center;
  height:100%;
  flex-direction: column;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}



</style>
<script>
console.log('----yoyo');


</script>
<h1 id="title">yo what up</h1>
<div class="WrapperWrapper">
  <div class="wrapper">
    <div class="marquee">
      <div>
        <span>You spin me right right right round, baby. Like a record, baby.</span>
        <span>You spin me right right right round, baby. Like a record, baby.</span>
      </div>
    </div>
  </div>
</div>

<!-- 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="robots" content="nofollow">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">



<style type="text/css">
body{
  margin:0;
}

.wrapper{
  position: fixed;
  background-color: pink;
  display: flex;
  flex-direction: row;
  width:200%;
}
.movershell{
  width: 50%;
  background-color: greenyellow;

  position: relative;
}
/*.a{
  animation: a 8s linear infinite;
}
.b{
  animation: b 8s linear infinite;
}

@keyframes a {
  from {left: 0;}
  to {left: -100%;}
}
@keyframes b {
  from {left: 100%;}
  to {left: 0;}
}
*/
/*@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}
*/
</style>
<div class="wrapper">
  <div class="movershell a ">
    <span>You spin me right round, baby. Like a record, baby.</span>
  </div>
  <div class="movershell b">
    <span>You spin me right round, baby. Like a record, baby.</span>
  </div>
</div>


















 -->