Can't remove padding (@media on landing page)

HTML-CSS
1

I’m trying to get responsive design working on the landing page project.
I’ve been able to make the nav bar switch to column on a smaller page size, but I can’t seem to remove the padding on the links even after setting padding to 0 on everything.
Anyone know why this is happening?

Relevant HTML:
https://codepen.io/mindboxer/pen/aPweGd.html



<header id="header">
       
        <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png"  /> 
        <nav>
          <a class="nav-link" href="#features">Features</a>
          <a class="nav-link" href="#how">How It Works</a>
          <a class="nav-link" href="#pricing">Pricing</a>
        </nav>
        
      </header>

Relevant CSS
https://codepen.io/mindboxer/pen/aPweGd.css


#header {
  position: fixed;
  display: flex;
  width: 100%;
  background-color: #E0E000;
  justify-content: space-between;
  align-items: center;
  height: auto;
}

@media screen and (max-width: 900px) {
  #header {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 500px) {
  #header {   
    flex-direction: column;
    margin: 0px;
    padding: 0px;
  }
  nav {
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
  }
  .nav-link {
    margin: 0px;
    padding: 0px;
  }

}

#header-img {
  width: 400px;
  max-width: 100%;
  height: auto;
  padding: 15px;
}

.nav-link {
  padding: 35px;
  font-size: 1.2em;
  }
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

3

There is another .nav-link outside your media query. Try moving that to the top because its after your media query its overriding it

1 Like
4

Thank you! I actually solved it by accident when I moved all the media queries to the bottom, but I didn’t understand why.
But after your answer now I see that the order is important.
I guess that’s why its recommended to put the media queries at the bottom of the CSS.