right float of about picture responsive

css/index.css

@@ -49,12 +49,19 @@ body, html {
     float: left;
 }
 
-.aboutPic {
+.aboutPicContainer {
     width: 60%;
     height: 300px;
     float: left;
 }
 
+#aboutPic {
+    float: right;
+    margin-top: 10%;
+    box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px;
+    height: 100%;
+}
+
 /* screen larger than 600px -- desktop */
 @media screen and (min-width: 1201px) {
     .tile {
@@ -129,12 +136,19 @@ body, html {
         width: 100%;
     }
 
-    .aboutPic {
+    .aboutPicContainer {
         width: 100%;
         height: 150px;
     }
 
-    #section2{
+    #section2 {
         height: 130%;
     }
+
+    #aboutPic {
+        float: initial;
+        margin-left: auto;
+        margin-right: auto;
+        /*    todo nof loating right in middle */
+    }
 }

index.html

@@ -94,8 +94,8 @@
                 <li>OpenSCAD</li>
             </ul>
         </div>
-        <div class="aboutPic">
-            <img src="rsc/self4.jpg" height="100%" style="float:right; margin-top: 10%">
+        <div class="aboutPicContainer">
+            <img src="rsc/self4.jpg" id="aboutPic">
         </div>
     </div>
 </div>