change design

Author: Adrinlol

css/style.css

@@ -2,27 +2,27 @@
   display: grid;
   grid-template-columns: minmax(300px, auto) 1fr;
   grid-template-areas: "navbar content";
-  grid-gap: 20px;
   padding-top: 3rem;
+  max-width: 60rem;
+  margin: 0 auto;
 }
 
 #navbar {
   position: fixed;
-  margin-left: 10px;
 }
 
 #navbar a {
   display: block;
-  border: 1px solid #000;
+  border-bottom: 1px solid #000;
   padding: 5px;
   margin: 10px 0;
   text-decoration: none;
   color: #000;
+  transition: all 0.3s;
 }
 
 #main-doc {
   grid-area: content;
-  padding-right: 3rem;
 }
 
 html {
@@ -31,6 +31,8 @@ html {
 
 body {
   font-family: "Roboto", sans-serif;
+  margin: 0;
+  padding: 0;
 }
 
 .bold {
@@ -50,15 +52,16 @@ header {
 code {
   background-color: #ddd;
   display: block;
-  margin: 15px 5px;
+  margin: 15px 0px;
   padding: 15px;
   border-radius: 10px;
   line-height: 20px;
 }
 
-@media screen and (max-width: 750px) {
+@media screen and (max-width: 768px) {
   .main-body {
     grid-template-columns: 1fr;
+    grid-gap: 20px;
     grid-template-areas: "navabar" "content";
   }