htmlcssmedia-queriesnavbarspacing

main content not starting at the top, being pushed off the page in desktop view

using a media query I set a min-width of 680px. I have set it to where my navbar stays on the left portion on the screen. The problem is that is all you see. The main content that should be on the right side is being pushed down the screen. I don't think it's a width issue, but please correct me if I'm wrong. P.S. I have many main-section elements for the main content. Repository: https://github.com/GojuNoah/Reponsive-Web-Design-Tech-Doc-Practice/tree/main

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #FAF0E6;
  margin: 0;
  padding: 0;
}

#navbar {
  background-color: #B9B4C7;
}

#navbar li a:hover {
  background-color: #5C5470;
  color: #FAF0E6;
}

.main-section {
  margin: 0 auto;
  padding: 10px;
  letter-spacing: .2;
}

.main-section header {
  font-size: 1.5em;
  font-weight: 600;
}

pre,
code {
  white-space: pre-wrap;
  font-family: monospace;
}

#conclusion li a:hover {
  color: #B9B4C7;
}

#conclusion,
ul {
  list-style: none;
}

#conclusion li a {
  text-decoration: none;
  color: #352F44;
  display: block;
  padding: 2px;
}

@media (min-width: 680px) {
  body {
    width: 100vw;
  }
  .main-section {
    margin-left: 30vw;
  }
  #navbar {
    position: sticky;
    top: 0;
    width: 30vw;
    height: 100vh;
    border-right: 2px solid #5C5470;
  }
  #navbar ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #navbar li {
    text-align: center;
    width: 100%;
  }
  #navbar a {
    color: #352F44;
    text-decoration: none;
    display: block;
    border: 1px solid black;
    text-align: left;
    padding: 10px;
    font-size: 1.5em;
    margin: 2px;
  }
  #navbar header {
    font-size: 2.5em;
    text-align: left;
    padding: 10px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
<body>
  <main id="main-doc">
    <nav id="navbar" aria-label="Main Navigation">
      <ul>
        <li>
          <header>Responsive Design</header>
        </li>
        <li><a class="nav-link" href="#introduction">Introduction</a></li>
        <li><a class="nav-link" href="#flexible_images">Flexible Images</a></li>
        <li><a class="nav-link" href="#media_queries">Media Queries</a></li>
        <li><a class="nav-link" href="#viewport_meta_tag">Viewport Meta Tag</a></li>
        <li><a class="nav-link" href="#mobile_first_design">Mobile First Design</a></li>
        <li><a class="nav-link" href="#flexbox">Flexbox</a></li>
        <li><a class="nav-link" href="#conclusion">Conclusion</a></li>
      </ul>
    </nav>

    <section class="main-section" id="introduction">
      <header>Introduction</header>
      <p class="info">Responsive Web Design is a combination of code to make websites look the way it should, no matter the size of the screen. It also includes accessibility. Design the website so that even those who use screen readers can understand what the webpage
        is about.</p>
      <header>Why is it important?</header>
      <p class="info">A Responsive Web Design is arguably the most important thing you need for a website besides the content of the website itself. It makes everything easier to look at, read, and understand for the end user. Whether they are using a phone, laptop,
        desktop, tablet, etc; They can read and understand the webpage. Accessibility users can know whats on the webpage. Images aren't stretched out or covering anything up. All this makes the website more desirable to stay on.</p>
    </section>

Solution

  • Applying flexbox to your <main id="main-doc"> wrapper should do the work.

    JSFiddle Demo

    @media (min-width: 680px) {
  #main-doc {
    display: flex;
    align-items: start;
  }
  /* ... */
}

    desired result

    In the picture above I removed the margin-left property.

    .main-section {
 /* margin-left: 30vw; */
}

    Edit

    The revised answer follows the same style as before, but this time I wrapped the content on the right in a single parent container.

    *,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #faf0e6;
  margin: 0;
  padding: 0;
}

#navbar {
  background-color: #b9b4c7;
}

#navbar li a:hover {
  background-color: #5c5470;
  color: #faf0e6;
}

.main-section {
  margin: 0 auto;
  padding: 10px;
  letter-spacing: 0.2;
}

.main-section header {
  font-size: 1.5em;
  font-weight: 600;
}

pre,
code {
  white-space: pre-wrap;
  font-family: monospace;
}

#conclusion li a:hover {
  color: #b9b4c7;
}

#conclusion,
ul {
  list-style: none;
}

#conclusion li a {
  text-decoration: none;
  color: #352f44;
  display: block;
  padding: 2px;
}

@media (min-width: 680px) {
  body {
    width: 100vw;
  }
  #main-doc {
    display: flex;
    align-items: start;
  }

  .main-section {
    /*margin-left: 30vw;*/
  }
  #navbar {
    position: sticky;
    top: 0;
    width: 30vw;
    height: 100vh;
    border-right: 2px solid #5c5470;
  }
  #navbar ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #navbar li {
    text-align: center;
    width: 100%;
  }
  #navbar a {
    color: #352f44;
    text-decoration: none;
    display: block;
    border: 1px solid black;
    text-align: left;
    padding: 10px;
    font-size: 1.5em;
    margin: 2px;
  }
  #navbar header {
    font-size: 2.5em;
    text-align: left;
    padding: 10px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Web Design Principles</title>
  </head>
  <body>
    <main id="main-doc">
      <nav id="navbar" aria-label="Main Navigation">
        <ul>
          <li><header>Responsive Design</header></li>
          <li><a class="nav-link" href="#introduction">Introduction</a></li>
          <li><a class="nav-link" href="#flexible_images">Flexible Images</a></li>
          <li><a class="nav-link" href="#media_queries">Media Queries</a></li>
          <li><a class="nav-link" href="#viewport_meta_tag">Viewport Meta Tag</a></li>
          <li><a class="nav-link" href="#mobile_first_design">Mobile First Design</a></li>
          <li><a class="nav-link" href="#flexbox">Flexbox</a></li>
          <li><a class="nav-link" href="#conclusion">Conclusion</a></li>
        </ul>
      </nav>
<div>

      <section class="main-section" id="introduction">
        <header>Introduction</header>
          <p class="info">Responsive Web Design is a combination of code to make websites look the way it should, no matter the size of the screen. It also includes accessibility. Design the website so that even those who  use screen readers can understand what the webpage is about.</p>
        <header>Why is it important?</header>
          <p class="info">A Responsive Web Design is arguably the most important thing you need for a website besides the content of the website itself. It makes everything easier to look at, read, and understand for the end user. Whether they are using a phone, laptop, desktop, tablet, etc; They can read and understand the webpage. Accessibility users can know whats on the webpage. Images aren't stretched out or covering anything up. All this makes the website more desirable to stay on.</p>
      </section>

      <section class="main-section" id="flexible_images">
        <header>Flexible Images</header>
        <p class="info">One of the principles in Responsive Web Design is having flexible images. This means that when the screen changes size, the image changes as well. Of course the image will already change simply because the screen size is changing, but you don't want it to get too small, stretched, or distorted in any way.</p>
        <p class="indent">One technique to help images scale correctly is shown below.</p>
        <pre><code>.img {
          max-width: 100%;
        }
        </pre></code>
      </section>

      <section class="main-section" id="media_queries">
        <header>Media Queries</header>
        <p class="info">Media queries are selectors for the screen size. You can set the query to be a minimum screen size and over and/or a max screen size and under. These are used for when you need the webpage to be formatted differently when it hits a certain screen size.</p>
        <p class="indent">Here is an example of both min and max size being used, but both are not required:</p>
        <pre><code>@media (min-size: 500px) and (max-size: 1000px) {
          .class {
            color: #ffffff;
            width: 50%;
          }
        }
        </pre></code>
      </section>

      <section class="main-section" id="viewport_meta_tag">
        <header>Viewport Meta Tag</header>
        <p class="info">The viewport meta tag is a meta element that goes in the header, like any other meta element. Normally, when a webpage that was made for desktop is viewed on a mobile device, the content gets shrunk to fit on the screen, resulting is tiny words and images. With the viewport meta tag, the content's width is adjusted to fit on the screen. </p>
        <p class="indent">The Viewport Meta tag:</p>
        <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&lt;
        </pre></code>
      </section>

      <section class="main-section" id="mobile_first_design">
        <header>Mobile First Design</header>
        <p class="info">Mobile first design is another principle in responsive web design. As the name entails, you first design the website to a mobile layout. You do this because on a mobile screen you have the least amount of room to work with. Once you've gotten the mobile layout done, designing the expanded layout will be much easier.</p>
      </section>

      <section class="main-section" id="flexbox">
        <header>Flexbox</header>
        <p class="info">Flexbox is a CSS layout module designed to create flexible and efficient layouts. It’s particularly useful for aligning items in a row or column and distributing space within a container, even when the size of the items is unknown or dynamic.</p>
        <p class="indent">Flex container: </p>
        <pre><code>/* this will create the flexbox */
        .container {
          display: flex; 
        } 
        </pre></code>
        <p class="indent">Now you can either adjust the content horizontally with justify-content: or vertically with align-items:</p> 
        <pre><code>/* adjust items horizontally */
        .container {
          display: flex;
          justify-content: space-between;
        }

        /* adjust items vertically */
        .container {
          display: flex;
          align-items: center;
        }
        </pre></code>
      </section>
      <section class="main-section" id="conclusion">
        <header>Conclusion</header>
        <p class="info">Remember these are just some of the principles in Responsive Web Design:</p>
        <ul>
          <li><a href="#flexible_images">Flexible Images</a></li>
          <li><a href="#media_queries">Media Queries</a></li>
          <li><a href="#viewport_meta_tag">Viewport Meta Tag</a></li>
          <li><a href="#mobile_first_design">Mobile First Design</a></li>
          <li><a href="#flexbox">Flexbox</a></li>
        </ul>
      </section>
</div>
    </main>
  </body>