diff --git a/components/card.css b/components/card.css
index efa8233..45bd9a3 100644
--- a/components/card.css
+++ b/components/card.css
@@ -1,6 +1,6 @@
 .card {
     position: relative;
-    width: 80%;
+    width: 320px;
     margin: 30px auto;
     border: 1px solid black;
     border-radius: 10px;
@@ -14,10 +14,16 @@
     animation: shake-animation 0.3s;
 } */
 
-.card:last-of-type {
+.card:nth-last-of-type(1) {
     margin-bottom: 100px;
 }
 
+@media (min-width: 1000px) {
+    .card:nth-last-of-type(2) {
+        margin-bottom: 100px;
+    }
+}
+
 .card__question {
     text-align: center;
     padding: 5px;
diff --git a/components/header.css b/components/header.css
index d1b6af4..2147743 100644
--- a/components/header.css
+++ b/components/header.css
@@ -1,11 +1,18 @@
 header {
+    margin: 0 auto;
     background-color: var(--primary-color);
-    position: sticky;
     border-radius: 10px;
     z-index: 5;
+    width: 400px;
 }
 
 h1 {
     text-align: center;
     padding: 10px;
+}
+
+@media (min-width: 1000px){
+    header {
+        width: 100%;
+    }
 }
\ No newline at end of file
diff --git a/components/nav.css b/components/nav.css
index 4bd229b..f7ba974 100644
--- a/components/nav.css
+++ b/components/nav.css
@@ -10,6 +10,12 @@
     border-radius: 10px;
 }
 
+@media (min-width: 1000px) {
+    .nav-list {
+        width: 800px;
+    }
+}
+
 .nav-list > li {
     padding: 10px;
     transition: 0.5s ease;
diff --git a/index.html b/index.html
index 86c3b1d..e7e8b2b 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="./style.css">
 </head>
 <body>
-    <main class="app-container">
+    <div class="all-container">
     <header>
         <h1>Quiz App</h1>
     </header>
@@ -16,7 +16,7 @@ <h1>Quiz App</h1>
         <input type="text" placeholder="Search cards" data-js="input-search">
         <button type="submit">Search</button>
     </form>
-    <div class="container-cards" data-js="card-container">
+    <main class="app-container" data-js="card-container">
     <section class="card" data-js="card">
         <h2 class="card__question">What property flips the axes in flexbox?</h2>
         <div class="card__btn-container"><button class="card__answer-btn" data-js="answerButton">Show answer</button></div>
@@ -28,7 +28,40 @@ <h2 class="card__question">What property flips the axes in flexbox?</h2>
         </ul>
         <button type="button" aria-label="set-bookmark" class="card__bookmark"><img src="./assets/icons/bookmark-svgrepo-com.svg" alt="bookmark" data-js="card-bookmark"><img class="hidden" src="./assets/icons/bookmark-svgrepo-com (1).svg" alt="bookmark" data-js="card-bookmark2"></button>
     </section>
-    </div>
+    <section class="card" data-js="card">
+        <h2 class="card__question">What property flips the axes in flexbox?</h2>
+        <div class="card__btn-container"><button class="card__answer-btn" data-js="answerButton">Show answer</button></div>
+        <div class="card__answer hidden" data-js="hidden">flex-direction</div>
+        <ul class="card__hashtag-box-list">
+            <li>#html</li>
+            <li>#css</li>
+            <li>#flexbox</li>
+        </ul>
+        <button type="button" aria-label="set-bookmark" class="card__bookmark"><img src="./assets/icons/bookmark-svgrepo-com.svg" alt="bookmark" data-js="card-bookmark"><img class="hidden" src="./assets/icons/bookmark-svgrepo-com (1).svg" alt="bookmark" data-js="card-bookmark2"></button>
+    </section>
+    <section class="card" data-js="card">
+        <h2 class="card__question">What property flips the axes in flexbox?</h2>
+        <div class="card__btn-container"><button class="card__answer-btn" data-js="answerButton">Show answer</button></div>
+        <div class="card__answer hidden" data-js="hidden">flex-direction</div>
+        <ul class="card__hashtag-box-list">
+            <li>#html</li>
+            <li>#css</li>
+            <li>#flexbox</li>
+        </ul>
+        <button type="button" aria-label="set-bookmark" class="card__bookmark"><img src="./assets/icons/bookmark-svgrepo-com.svg" alt="bookmark" data-js="card-bookmark"><img class="hidden" src="./assets/icons/bookmark-svgrepo-com (1).svg" alt="bookmark" data-js="card-bookmark2"></button>
+    </section>
+    <section class="card" data-js="card">
+        <h2 class="card__question">What property flips the axes in flexbox?</h2>
+        <div class="card__btn-container"><button class="card__answer-btn" data-js="answerButton">Show answer</button></div>
+        <div class="card__answer hidden" data-js="hidden">flex-direction</div>
+        <ul class="card__hashtag-box-list">
+            <li>#html</li>
+            <li>#css</li>
+            <li>#flexbox</li>
+        </ul>
+        <button type="button" aria-label="set-bookmark" class="card__bookmark"><img src="./assets/icons/bookmark-svgrepo-com.svg" alt="bookmark" data-js="card-bookmark"><img class="hidden" src="./assets/icons/bookmark-svgrepo-com (1).svg" alt="bookmark" data-js="card-bookmark2"></button>
+    </section>
+    </main>
     <nav>
         <ul class="nav-list">
             <li class="nav-list__item"><a href="./index.html" data-js="listItem"><img src="./assets/icons/home-svgrepo-com.svg" alt="Homebutton"></a></li>
@@ -37,7 +70,7 @@ <h2 class="card__question">What property flips the axes in flexbox?</h2>
             <li class="nav-list__item"><a href="./profile.html" data-js="listItem"><img src="./assets/icons/profile-user-svgrepo-com.svg" alt="Go to profile button"> </a></li>
         </ul>
     </nav>
-</main>
+    </div>
 <script src="./app.js" type="module"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 258c046..c368752 100644
--- a/style.css
+++ b/style.css
@@ -19,8 +19,20 @@ body {
 }
 
 .app-container {
-    width: 400px;
     margin: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: start;
+    z-index: -1;
 }
 
+.all-container {
+    width: 400px;
+    margin: auto;
+}
 
+@media (min-width: 1000px){
+    .all-container {
+        width: 800px;
+    }
+}
\ No newline at end of file
