understood how, just need to break down details of px assigment in the css

Juansolo457 · Juansolo457 · commit f293c826ec68 · 2016-12-28T20:33:48.000-08:00
diff --git a/display-exercise.html b/display-exercise.html
@@ -27,7 +27,7 @@
           <div class='box box_third black'></div>
           <div class='box box_third orange'></div> 
       </div>
-    </div>
+    <
   </main>
 </body>
 </html>
diff --git a/position-exercise.html b/position-exercise.html
@@ -12,14 +12,12 @@
 
   <!-- styles -->
   <link rel="stylesheet" type="text/css" href="styles/main.css">
-
-  <!-- your styles go in position-page.css -->
   <link rel="stylesheet" type="text/css" href="styles/position-page.css">
 </head>
 <body>
-  <!-- To finish the design, the HTML for the nav requires no additional elements, just the right CSS -->
-  <nav>
-    <img src="images/icon.png">
+  <!-- put your nav code in the nav element-->
+  <nav class="container">
+    <img src="images/icon.png" class="icon-img">
     <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="display-exercise.html">display</a></li>
@@ -28,7 +26,12 @@
   </nav>
 
   <main>
-    <!-- Put the HTML you need to accomplish the design -->
+    <div class="hero-image">
+      <div class="box">
+        <img src="images/spacecat.png" class='spacecat'>
+        <img src="images/spacedog.png" class='spacedog'>
+      </div>
+    </div>
   </main>
 </body>
-</html>
+</html>
diff --git a/styles/position-page.css b/styles/position-page.css
@@ -1 +1,74 @@
+.container {
+  padding-left: 60px;
+  padding-right: 60px;
+}
 
+nav {
+  height: 60px;
+  background-color: grey;
+  position: fixed;
+  width: 100%;
+}
+
+nav .icon-img {
+  height: 50px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  border-radius: 50%;
+  vertical-align: middle;
+  border: 1px solid black;
+}
+
+nav ul {
+  display: inline-block;
+  list-style: none;
+}
+
+nav li {
+  display: inline-block;
+}
+
+nav li::after {
+  content: "|";
+  margin-left: 5px;
+}
+
+nav a:hover {
+  color: black;
+}
+
+body {
+  background: url(../images/outerspace_landscape.jpeg) no-repeat;
+  background-size: cover;
+}
+
+main {
+  padding-top: 90px;
+  min-width: 1000px;
+}
+
+.box {
+  margin-top: 150px;
+  width: 600px;
+  height: 300px;
+  position: relative;
+  border: 10px dotted green;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+.spacecat, .spacedog {
+  position: absolute;
+  width: 200px;
+}
+
+.spacecat {
+  top: -90px;
+  left: -90px;
+}
+
+.spacedog {
+  bottom: -120px;
+  right: -60px;
+}
