fix play button positioning

src/components/microworld/microworld.jsx

@@ -56,14 +56,10 @@ var Microworld = React.createClass({
             height: 357,
             padding: 15
         };
-        var left = 25 * (key+1)
-        if (this.state.microworld_data.videos.length == 1) {
-            left = 50
-        }
         return (
             <div>
                 <div className="video">
-                    <div className="play-button" onClick={this.showVideo.bind(this, key)} style={{ left: left +'%', top: '60%' }}>
+                    <div className="play-button" onClick={this.showVideo.bind(this, key)}>
                     </div>
                     <img src={video.image} />
                 </div>
@@ -232,7 +228,7 @@ var Microworld = React.createClass({
         
 
         return (
-            <div>
+            <div className="inner">
                 <div className="top-banner section">
                     <h1>{microworldData.title}</h1>
                     <p>{microworldData.description.join(" ")}</p>

src/components/microworld/microworld.scss

@@ -43,8 +43,6 @@ $base-bg: $ui-white;
   .videos-container {
     display: flex;
     margin: 0 auto;
-    padding-top: 20px;
-    width: 95%;
 
     justify-content: center;
     flex-wrap: wrap;
@@ -57,14 +55,12 @@ $base-bg: $ui-white;
     }
 
     .video {
-      width: 30%;
+      position:relative;
       margin: 10px;
       border-radius: 7px;
       background-color: $active-gray;
       padding: 2px;
-
-      min-width: 300px;
-      max-width: 350px;
+      max-width: 290px;
     }
 
     img {
@@ -76,14 +72,14 @@ $base-bg: $ui-white;
 
     .play-button {
       display: block;
-
+      top: calc(50% - 25px);
+      left: calc(50% - 35px);
       opacity: .8;
       border: 5px solid $ui-border;
       border-radius: 20px;
       background-color: $type-gray;
       width: 70px;
       height: 50px;
-      top: 60%;
 
       &,
       &:after {