diff --git a/src/sass/base/_container.scss b/src/sass/base/_container.scss
new file mode 100644
index 0000000..5eefa80
--- /dev/null
+++ b/src/sass/base/_container.scss
@@ -0,0 +1,22 @@
+@media screen and (max-width: 768px) {
+    .container {
+        width: 480px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .container {
+        flex-direction: row;
+        width: 768px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+@media screen and (min-width: 1280px) {
+    .container {
+        width: 1280px;
+    }
+}
\ No newline at end of file
diff --git a/src/sass/components/film-container.scss b/src/sass/components/film-container.scss
index 3e221af..cabb5aa 100644
--- a/src/sass/components/film-container.scss
+++ b/src/sass/components/film-container.scss
@@ -3,7 +3,12 @@
   flex-wrap: wrap;
   gap: 16px;
   padding-top: 60px;
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+  }
 }
+
 .film-list__link {
   text-decoration: none;
 }
@@ -22,6 +27,13 @@
   }
 }
 
+@media screen and (min-width: 768px) {
+  .film-list__item {
+    width: 336px;
+    margin: 0 auto;
+  }
+}
+
 .film-list__img {
   display: block;
   width: 100%;
diff --git a/src/sass/components/header.scss b/src/sass/components/header.scss
index 7b0be4f..6290cb1 100644
--- a/src/sass/components/header.scss
+++ b/src/sass/components/header.scss
@@ -5,6 +5,10 @@
   background-size: cover;
   background-repeat: no-repeat;
   padding: 40px 0 80px 0;
+
+  @media screen and (max-width: 480px) {
+    width: 480px;
+  }
 }
 
 .logo__link {
diff --git a/src/sass/index.scss b/src/sass/index.scss
index 8e6ef1b..3e85a4f 100644
--- a/src/sass/index.scss
+++ b/src/sass/index.scss
@@ -2,6 +2,7 @@
 @import './utils/visually-hidden.scss';
 
 @import './base/common';
+@import './base/container';
 
 @import './components/header.scss';
 @import './components/library.scss';