adding responsiveness to page via bootstrap to fix all around brokenness

Author: aofengen

color morgan logo 81717.pdf

@@ -56,39 +56,41 @@ <h2>Our Goal:</h2>
 			cillum dolore eu fugiat nulla pariatur.</p>
 		</div>
 	</div>
-	<section id="mainMenu">
+	<div class="container">
+		<div class="row">
 		<!--box containing products-->
-		<div class="itemBox">
-			<img src="./img/mug.jpg" alt="Photo by Hans Vivek on Unsplash" class="itemPic" border="0">
-			<a href=""><h3>Mugs</h3></a>
-			<p class="itemText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-		</div>
-		<div class="itemBox">
-			<img src="./img/hat.jpg" alt="Photo by Nina Strehl on Unsplash" class="itemPic" border="0">
-			<a href=""><h3>Hats</h3></a>
-			<p class="itemText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-		</div>
-		<div class="itemBox">
-			<img src="./img/shirt.jpg" alt="Photo by Jerry Kiesewetter on Unsplash" class="itemPic" border="0">
-			<a href=""><h3>Shirts</h3></a>
-			<p class="itemText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-		</div>
-		<div class="itemBox">
-			<img src="./img/water-bottle.jpg" alt="" class="itemPic" border="0">
-			<a href=""><h3>Water Bottles</h3></a>
-			<p class="itemText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-		</div>
-		<div class="itemBox">
-			<img src="./img/pen.jpg" alt="" class="itemPic" border="0">
-			<a href=""><h3>Pens</h3></a>
-			<p class="itemText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-		</div>
-		<div class="itemBox">
-			<img src="./img/golf-balls.jpg" alt="Photo by Tyson Dudley on Unsplash" class="itemPic" border="0">
-			<a href=""><h3>Golf Balls</h3></a>
-			<p class="itemText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+			<div class="col-md-3 itemBox">
+				<img src="./img/mug.jpg" alt="Photo by Hans Vivek on Unsplash" class="itemPic" border="0">
+				<a href=""><h3>Mugs</h3></a>
+				<p class="itemText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+			</div>
+			<div class="col-md-3 itemBox">
+				<img src="./img/hat.jpg" alt="Photo by Nina Strehl on Unsplash" class="itemPic" border="0">
+				<a href=""><h3>Hats</h3></a>
+				<p class="itemText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+			</div>
+			<div class="col-md-3 itemBox">
+				<img src="./img/shirt.jpg" alt="Photo by Jerry Kiesewetter on Unsplash" class="itemPic" border="0">
+				<a href=""><h3>Shirts</h3></a>
+				<p class="itemText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+			</div>
+			<div class="col-md-3 itemBox">
+				<img src="./img/water-bottle.jpg" alt="" class="itemPic" border="0">
+				<a href=""><h3>Water Bottles</h3></a>
+				<p class="itemText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+			</div>
+			<div class="col-md-3 itemBox">
+				<img src="./img/pen.jpg" alt="" class="itemPic" border="0">
+				<a href=""><h3>Pens</h3></a>
+				<p class="itemText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+			</div>
+			<div class="col-md-3 itemBox">
+				<img src="./img/golf-balls.jpg" alt="Photo by Tyson Dudley on Unsplash" class="itemPic" border="0">
+				<a href=""><h3>Golf Balls</h3></a>
+				<p class="itemText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+			</div>
 		</div>
-	</section>
+	</div>
 
 	<div class="clear"></div>
 

index.html

@@ -35,8 +35,6 @@ h6 {
 	color: red;
 }
 
-#ourGoalDiv
-
 .mainMenu {
 	top: 3em;
 	float: right;
@@ -54,9 +52,9 @@ section p#itemText {
 .itemBox {
 	float: right;
 	position: relative;
+	margin: 1em;
 	width: 300px;
 	height: 300px;
-	margin: 1em;
 	padding: .2em;
 	border: solid 1px black;
 	background-color: #fff;