diff --git a/index.html b/index.html
index 72b560d..df6129b 100644
--- a/index.html
+++ b/index.html
@@ -2,20 +2,24 @@
 <html>
   <head>
     <title>My Personal Web Page</title>
+    <link rel="stylesheet" href="styles.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
     <header>
-      <h1>Welcome to My Personal Web Page</h1>
-      <nav>
-        <ul>
-          <li><a href="#">Home</a></li>
-          <li><a href="#">About</a></li>
-          <li><a href="#">Contact</a></li>
-        </ul>
-      </nav>
+      <div class="header-container"> 
+        <h1>Welcome to My Personal Web Page</h1>
+        <nav class="nav">
+          <ul>
+            <li><a href="#">Home</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
     </header>
-    <main>
-      <section>
+    <main class="container">
+      <section class="container-element">
         <h2>About Me</h2>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
@@ -23,13 +27,13 @@ <h2>About Me</h2>
           magna leo.
         </p>
       </section>
-      <section>
+      <section class="container-element contact">
         <h2>Contact Information</h2>
         <p>Email: info@example.com</p>
         <p>Phone: 123-456-7890</p>
       </section>
     </main>
-    <footer>
+    <footer class="footer">
       <p>&copy; 2023 My Personal Web Page. All rights reserved.</p>
     </footer>
   </body>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..7cea4a3
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,80 @@
+html {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Roboto';
+    font-size: 14px;
+    line-height: 2em;
+    font-weight: 300;
+    margin: 0;
+    background-color: lightgray;
+  }
+
+.header-container{
+    width: 95%;
+    margin: 0 auto;
+}
+
+ul{
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+main {
+    margin: 0 10px;
+    background-color: white;
+}
+
+.container h2{
+    padding-top: 20px;
+}
+.container-element {
+    padding: 0 10px;
+}
+
+.contact {
+    padding-bottom: 10px;
+}
+
+footer  {
+    background-color: lightgray;
+    text-decoration: none;
+    margin: 0 10px;
+  }  
+
+@media screen and (max-width: 600px) {
+    .header-container {
+        text-align: center};
+
+    .nav {
+        display: block;
+        text-align: center;
+    }
+}
+
+@media screen and (min-width: 601px) {
+    .nav li {
+        display: inline;
+        padding: 0 10px;
+    }
+    .container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    .container-element {
+        padding: 10px;
+        flex-basis: 50%;
+        text-align: left;
+    }
+    footer {
+        text-align: center;
+    }
+}
\ No newline at end of file
