changed solution structure to better reflect design html process

dshcheung · dshcheung · commit e39c15f16afa · 2015-09-24T01:37:14.000+08:00
diff --git a/solution-code/css/main.css b/solution-code/css/main.css
@@ -8,14 +8,19 @@ light blue: #1c5380
 body {
   background: #fff url('../images/bgtile.png') repeat-x;
   font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
-  margin: 0 auto;
-  padding-top: 90px;
-  padding-left: 10px;
-  padding: right: 10px;
-  width: 880px;
+  margin: 0;
 }
 
 /*Main CSS*/
+main {
+  width: 880px;
+  margin: 90px auto 0;
+}
+
+main section.section-left {
+  float: left;
+}
+
 main section.section-right {
   float: right;
   width: 500px;
diff --git a/solution-code/index.html b/solution-code/index.html
@@ -7,6 +7,10 @@
 <body>
 
   <main>
+    <section class="section-left">
+      <img src="images/phones.png" alt="Product Photo">
+    </section>
+
     <section class="section-right">
       <img src="images/brand.png" alt="Instagram">
 
@@ -23,11 +27,6 @@ <h1>Capture and Share<br>the World's Moments</h1>
         <a href="#"><img src="images/badge-android.png" alt="Get it on Google Play"></a>
       </article>
     </section>
-
-    <section class="section-left">
-      <img src="images/phones.png" alt="Product Photo">
-    </section>
-
   </main>
 
   <footer>
