making websight have more of a responsive design

shop/static/styles.css

@@ -20,9 +20,9 @@ a:link {
 }
 
 .item_home_img {
-    height: 200px;
+    height: 90%;
     float: right;
-    padding: 20px;
+    padding: 2%;
 }
 
 .home_side {
@@ -132,7 +132,7 @@ a:link {
 
 .navbar_box {
     height: 70px;
-    width: 160px;
+    width: 200px;
     margin-top: 10px;
     margin-bottom: 10px;
 }
@@ -142,19 +142,6 @@ a:link {
     border-right: 1px solid grey;
 }
 
-.navbar_box_home {
-    height: 70px;
-    width: 160px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    margin-left: 10px;
-}
-
-.navbar_box_home:hover {
-    border-left: 1px solid grey;
-    border-right: 1px solid grey;
-}
-
 li {
   float: left;
 }
@@ -175,6 +162,7 @@ li {
 
 .navbar_item {
   display: block;
+  font-family: Andale Mono, monospace;
   color: grey;
   font-size: 200%;
   text-align: center;
@@ -429,6 +417,7 @@ li {
 .start_shopping_text {
     color: white;
     font-size: 400%;
+    font-family: Andale Mono, monospace;
 }
 
 .start_shopping_text:hover {

shop/templates/layout.html

@@ -37,8 +37,8 @@
        alt="logo image" />
 </div>
     <ul class = "navbar">
-        <li><div class = "navbar_box_home"><a class = "navbar_item" href="{{ url_for('home') }}">Home</a></div></li>
-        <li><div class = "navbar_box_home"><a class = "navbar_item" href="{{ url_for('shopping') }}">Shopping</a></div></li>
+        <li><div class = "navbar_box"><a class = "navbar_item" href="{{ url_for('home') }}">Home</a></div></li>
+        <li><div class = "navbar_box"><a class = "navbar_item" href="{{ url_for('shopping') }}">Shopping</a></div></li>
         <li><div class = "navbar_box"><a class = "navbar_item" href="{{ url_for('cart') }}">Cart</a></div></li>
         <li><div class = "navbar_box"><a class = "navbar_item" href="{{ url_for('wishlist') }}">Wishlist</a></div></li>
         {% if current_user.is_authenticated %}