Fix according to the comments

- Add a wrapper div that wraps all the code.
- Change structure project.

practice/practice-02/src/index.pug

@@ -1,23 +1,24 @@
 include ./includes/mixins
 
 doctype html
-html(lang="en")
+html(lang='en')
   head
-    meta(charset="UTF-8")
-    meta(name="viewport", content="width=device-width, initial-scale=1.0")
-    link(rel="stylesheet", href="./styles/main.scss")
+    meta(charset='UTF-8')
+    meta(name='viewport', content='width=device-width, initial-scale=1.0')
+    link(rel='stylesheet', href='./styles/_main.scss')
     link(
-      rel="icon",
-      type="image/x-icon",
-      href="./assets/images/favicon-16x16.png"
+      rel='icon',
+      type='image/x-icon',
+      href='./assets/images/favicon-16x16.png'
     )
     title Food Hut
   body
-    include layouts/header
-    main
-      include sections/welcome
-      include sections/offer
-      include sections/service
-      include sections/menu
-      include sections/platform
-    include layouts/footer
+    .wrapper
+      include layouts/header
+      main
+        include sections/welcome
+        include sections/offer
+        include sections/service
+        include sections/menu
+        include sections/platform
+      include layouts/footer

practice/practice-02/src/styles/_main.scss

@@ -17,8 +17,8 @@
 @import './layouts/footer';
 
 //Sections
-@import './sections/welcome';
-@import './sections/offer';
-@import './sections/service';
-@import './sections/menu';
-@import './sections/platform';
+@import './pages/home/welcome';
+@import './pages/home/offer';
+@import './pages/home/service';
+@import './pages/home/menu';
+@import './pages/home/platform';

practice/practice-02/src/styles/bases/_base.scss

@@ -1,3 +1,14 @@
 body {
   min-width: 428px;
 }
+
+.wrapper {
+  max-width: 428px;
+  margin-inline: auto;
+}
+
+@media screen and (min-width: 600px) {
+  .wrapper {
+    max-width: $max-width;
+  }
+}

practice/practice-02/src/styles/layouts/_footer.scss

@@ -8,7 +8,6 @@
 
     padding-top: 116px;
     padding-left: 24px;
-    max-width: 428px;
   }
 
   &__brand-name {
@@ -117,7 +116,6 @@
     &__container {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      max-width: $max-width;
       width: auto;
       column-gap: 10px;
       padding-inline: 10px;

practice/practice-02/src/styles/layouts/_header.scss

@@ -30,8 +30,6 @@
 @media screen and (min-width: 1020px) {
   .header {
     @include size(auto, auto);
-
-    max-width: $max-width;
   }
 
   .header__container {

practice/practice-02/src/styles/pages/home/_menu.scss

@@ -12,7 +12,6 @@
     @extend %mr-inline-auto;
 
     padding-top: 110px;
-    max-width: 424px;
   }
 
   &__heading {
@@ -74,10 +73,6 @@
 
 @media screen and (min-width: 600px) {
   .menu {
-    &__container {
-      max-width: $max-width;
-    }
-
     &__heading {
       max-width: 653px;
     }

practice/practice-02/src/styles/pages/home/_offer.scss

@@ -1,6 +1,5 @@
 .offer {
   position: relative;
-  max-width: 428px;
   margin-inline: auto;
 
   &__container {
@@ -61,10 +60,8 @@
 
 @media screen and (min-width: 600px) {
   .offer {
-    max-width: $max-width;
-
     &__container {
-      max-width: $max-width;
+      max-width: unset;
     }
 
     &__card-list {

practice/practice-02/src/styles/pages/home/_platform.scss

@@ -1,6 +1,5 @@
 .platform {
   &__container {
-    max-width: 428px;
     margin-inline: auto;
     padding-top: 26px;
     padding-bottom: 58px;
@@ -82,7 +81,6 @@
 @media screen and (min-width: 600px) {
   .platform {
     &__container {
-      max-width: $max-width;
     }
 
     &__image-container {

practice/practice-02/src/styles/pages/home/_service.scss

@@ -1,5 +1,4 @@
 .service {
-  max-width: 428px;
   margin-inline: auto;
 
   &__container {
@@ -97,8 +96,6 @@
 
 @media screen and (min-width: 600px) {
   .service {
-    max-width: $max-width;
-
     &__img-container {
       margin-inline: auto;
     }

practice/practice-02/src/styles/pages/home/_welcome.scss

@@ -18,13 +18,11 @@
     @include flex-layout($justify: center, $direction: column);
 
     margin: auto;
-    max-width: 428px;
     padding-top: 67px;
   }
   // Start banner
   &__banner-container {
     @extend %d-flex;
-    @include size(428px, auto);
     @include flex-layout($justify: center, $direction: column);
 
     position: relative;
@@ -343,7 +341,6 @@
 
       padding-top: 130px;
       width: 100%;
-      max-width: $max-width;
     }
 
     // Start content