make content narrower

2 files changed, 10 insertions, 6 deletions

diff --git a/_sass/_brand.scss b/_sass/_brand.scss
index 845deac..9d9eb63 100644
--- a/_sass/_brand.scss
+++ b/_sass/_brand.scss
@@ -8,6 +8,11 @@ header, footer, main {
   @extend .container;
 }
 
+main {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 a {
   color: $teal;
   transition: color 0.4s ease, background-color 0.4s ease;
@@ -20,7 +25,7 @@ a {
 
 kbd {
   border-style: solid;
-  border-color: $gray;
+  border-color: $light-gray;
   border-width: 1px 1px 2px 1px;
   border-radius: 4px;
   font-size: 0.8rem;
@@ -42,7 +47,7 @@ header nav a {
 
 time {
   color: $light-gray;
-  font-family: $monospace;
+  font-style: italic;
 }
 
 hr {
diff --git a/_sass/_respond.scss b/_sass/_respond.scss
index 1acbecc..863767a 100644
--- a/_sass/_respond.scss
+++ b/_sass/_respond.scss
@@ -1,7 +1,6 @@
 // Set up default container
 .container {
   display: block;
-  width: 100%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0;
@@ -30,15 +29,15 @@
 }
 
 // Set a layout breakpoint at 768px for tablets
-@media only screen and (min-width: 768px) and (max-width: 899px) {
+@media only screen and (min-width: 768px) and (max-width: 799px) {
   .container {
     width: 768px;
   }
 }
 
 // Set a layout breakpoint at 900px for desktops
-@media only screen and (min-width: 900px) {
+@media only screen and (min-width: 800px) {
   .container {
-    width: 900px;
+    width: 800px;
   }
 }