diff --git a/css/styles.css b/css/styles.css
index 13cbe2f..ea135c2 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,20 +1,25 @@
 body {
   margin: 0;
+  scroll-behavior: smooth;
+  box-sizing: border-box;
 }
 
 header {
   background-color: blue;
+  width: 100%;
 }
 header .row {
   display: flex;
-  margin: 0 auto;
+  align-items: center;
   max-width: 600px;
+  margin: 0 auto;
   justify-content: space-around;
 }
 header ul {
   display: flex;
   margin: 0;
   align-content: baseline;
+  flex-direction: row;
 }
 header ul li {
   padding: 10px 15px;
@@ -38,10 +43,12 @@ header .logo {
 main {
   margin: 0 auto;
   max-width: 600px;
+  padding: 0 10px;
 }
 main div.row {
   display: flex;
   gap: 20px;
+  flex-direction: column;
 }
 
 pre {
@@ -53,6 +60,7 @@ pre {
 footer {
   color: #fff;
   background-color: gray;
+  padding: 15px;
 }
 footer .row {
   display: flex;
@@ -69,4 +77,26 @@ footer img {
   height: auto;
 }
 
+@media (max-width: 600px) {
+  main {
+    min-width: 320px;
+    padding: 0 10px;
+  }
+  .logo {
+    display: none;
+  }
+  header ul {
+    flex-direction: column;
+  }
+  footer .row {
+    display: flex;
+    align-items: center;
+    min-width: 320px;
+    margin: 0 auto;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
 /*# sourceMappingURL=styles.css.map */
diff --git a/css/styles.css.map b/css/styles.css.map
index 10fcd1f..19df326 100644
--- a/css/styles.css.map
+++ b/css/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/styles.scss"],"names":[],"mappings":"AAAA;EAAM;;;AAEN;EAEI;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAMhB;EACI;EACA;EACA;;;AAKR;EACI;EACA;;AAEA;EACI;EACA;;;AAIR;EACI;EACA;EACA;;;AAIJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAAG;;AAEH;EACI;EACA","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/styles.scss"],"names":[],"mappings":"AAWA;EACI;EACA;EACA;;;AAGJ;EAEI;EACA;;AAEA;EArBA;EACA;EACA;EACA;EACA;;AAqBA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAMhB;EACI;EACA;EACA;;;AAKR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAIJ;EACI;EACA;EACA;;AAEA;EAjFA;EACA;EACA;EACA;EACA;;AAkFA;EAAG;;AAEH;EACI;EACA;;;AAKR;EAWI;IACI;IACA;;EAGJ;IAAO;;EAGH;IAAI;;EAGJ;IApBA;IACA;IACA;IACA;IACA;IACA;IACA","file":"styles.css"}
\ No newline at end of file
diff --git a/scss/styles.scss b/scss/styles.scss
index f709515..1c0ba2c 100644
--- a/scss/styles.scss
+++ b/scss/styles.scss
@@ -1,23 +1,34 @@
+@mixin row {
+    display: flex;
+    align-items: center;  
+    max-width: 600px;
+    margin: 0 auto;
+    justify-content: space-around;
+}
+
+
+
+
 body {
     margin: 0;
     scroll-behavior: smooth;
+    box-sizing: border-box;
 }
 
 header {
 
     background-color: blue;
+    width: 100%;
 
     .row {
-        display: flex;
-        margin: 0 auto;
-        max-width: 600px;
-        justify-content: space-around;
+        @include row;
     }
 
     ul {
         display: flex;
         margin: 0;
         align-content: baseline;
+        flex-direction: row;
 
         li {
             padding: 10px 15px;
@@ -48,10 +59,12 @@ header {
 main {
     margin: 0 auto;
     max-width: 600px;
+    padding: 0 10px;
 
     div.row {
         display: flex;
         gap: 20px;
+        flex-direction: column;
     }
 }
 
@@ -65,14 +78,11 @@ pre {
 footer {
     color: #fff;
     background-color: gray;
-    padding: 15px 0;
+    padding: 15px;
 
     .row {
-        display: flex;
-        align-items: center;  
-        max-width: 600px;
-        margin: 0 auto;
-        justify-content: space-around;
+        @include row;
+        
     }
     
     a {color: #fff;}
@@ -82,4 +92,33 @@ footer {
         height: auto;
 
     }
+}
+
+@media (max-width:600px) {
+    @mixin row {
+        display: flex;
+        align-items: center;  
+        min-width: 320px;
+        margin: 0 auto;
+        justify-content: center;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    main {
+        min-width: 320px;
+        padding: 0 10px;
+    }
+
+    .logo {display: none;}
+
+    header {
+        ul {flex-direction: column;}
+    }
+    footer {    
+        .row {
+            @include row;
+            
+        }
+    }
 }
\ No newline at end of file