Container goes underneath fixed element when min-width is applied

Question

I am trying to complete a freecodecamp project. I have a sidebar nav along with a section-container. When I set min-width: 600px; to the section-container, it works as expected, but when I minimize my window below 600px and click on the navbar links, the section-container goes underneath the navbar despite there being a margin-left applied to it. This doesn't happen when min-width is not applied.

Why is this happening, and how do I fix it?

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  line-height: 1.4;
  font-size: 1.25rem; 
}

.container #main-doc #navbar header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container #main-doc #navbar header h1 {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}

.container #main-doc nav {
  position: fixed;
  border-right: 2px solid black;
  height: 100%;
}

.container #main-doc nav ul:first-of-type {
  list-style: none;
}

.container #main-doc nav ul:first-of-type li{
  margin-bottom: 0.625rem;
  padding-right: 0.625rem;
  border-bottom: 2px solid black;
}

.container #main-doc nav ul:first-of-type li a {
  text-decoration: none;
  color: black;
  display: block;
  margin-left: 1.25rem;
}

.container #main-doc #section-container {
/*   padding: 2.5rem 2.5rem; */
  margin-left: 370px;
  min-width: 600px;
}

.container #main-doc #section-container .main-section header {
  font-size: 1.5rem;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.container #main-doc #section-container .main-section {
  margin-bottom: 2.5rem;
}

.container #main-doc #section-container .main-section p {
  margin-left: 1.25rem;
}

.container #main-doc #section-container .main-section ul {
  margin-left: 5rem;
}


  
    
      
        Semantic Elements
      
      
        New Semantic Tags Added by HTML5
        The header element
        The main element
        The nav element
        The article element
        The section element
        The aside element
        The address element
        The footer element
      
  
  
    
      New Semantic Tags Added by HTML5
      In this brief tutorial we’ll touch on all of the new tags added as part of HTML5 to define the structure and content of a web page. The elements we’re going to cover in this guide include:
      
        header
        main
        nav
        article
        section
        aside
        address
        footer
      
      Using these elements isn’t as complicated as it might appear at first glance, and most are fairly self-explanatory. We’ll make a quick pass over each new element, and then draw up an HTML template you can use these new tags to add rich semantic meaning to your markup.
    
      
    
      The header element
      The header element is used to contain the content that appears at the top of every page of your website: the logo, tagline, search prompt, and possibly a navigational menu. In most cases, the header element is best positioned as a direct descendant of the body element, but it’s also ok to place it inside the main element if you prefer.
    
      
    
      The main element
      Use the main element between header and footer elements to contain the primary content of your web page. The main element cannot be a descendant of an article, aside, header, footer, or nav element. Instead, it should be a direct descendant of the body element. Think of it as the direct replacement for the div id="main" you’ve used in the past to wrap up your entire page contents.

It’s also ok to use more than one main element on a webpage. For example, if your blog homepage includes your five most recent posts, it would be appropriate to wrap each post in it’s own main element – or you could wrap each in article tags.
    
      
     
       The nav element
       Navigational menus are commonly placed at the top of a web page, in a sidebar, or in the page footer. Wherever you happen to place a navigational menu, wrap it in nav tags. Note that you don’t need to use nav tags for every link, just for blocks of links that provide either sitewide navigation or navigation for a specific part of a website.
    
      
    
      The article element
      If your website includes blog posts, articles, or any other content that could just as well appear on another website as syndicated content, wrap that content in an article post. You can use an article element just about anywhere other than nested within an address element, but in most cases an article element will be a direct descendant of a main element or of a section element that is a direct descendant of a main element..
    
      
    
      The section element
      Navigational menus are commonly placed at the top of a web page, in a sidebar, or in the page footer. Wherever you happen to place a navigational menu, wrap it in nav tags. Note that you don’t need to use nav tags for every link, just for blocks of links that provide either sitewide navigation or navigation for a specific part of a website.
    
      
      
        The aside element
        If your website contains information that isn’t directly related to the main content of the page, it would be appropriate to wrap that information in aside tags. For example, if you write a post that includes some technical terms, and you add definitions for those terms in a sidebar, it would make sense to wrap those definitions in aside tags. It is also common for the entire sidebar of a blog-type website to be wrapped in aside tags to make it clear that the sidebar is not part of the primary content of the page.
      
      
      
        The address element
        The address element provides contact information for the nearest parent article or body element that contains it. Use the address element inside an article to provide contact information for the article’s author. Use it outside of an article in the main or footer elements, or as a direct descendant of the body element, to provide contact information for the website’s owner.
      
      
      
        The footer element
        The footer appears at the bottom of a section of a document. Typically, the footer is a direct descendant of the body element, but it can also be used within a main element, a section, or an article. The most common use of the footer element is to place it at the bottom of an HTML document to contain things like a copyright notice, links to related content, address information about the owner of the website, and links to administrative things like privacy policies and website’s terms of service.

You may also use the footer element within an article to provide metadata about that particular article. For example, if article tags have been used to wrap a forum post, it would be appropriate to wrap copyright information and the date and time the post was made in a footer element and place it at the bottom of the article.
      
       Source

Container goes underneath fixed element when min-width is applied

Answers (1)

Related Questions