margin/ padding in between list isn't working-CodePudding

I've was trying to change the display of the nav bar list with media query when the page width shrinks. I put on the padding in between the lists and it's not appearing somehow. I wonder if it's because of flexbox or something else.

HTML CODE

<header id="header">
      <h1><img id="header-img" src="https://cdn-icons-png.flaticon.com/512/4907/4907546.png" alt="cat tower">Aristocat Tower</h1>
      <nav id="nav-bar">
        <ul id="nav-list">
          <li><a  href="#features">Features</a></li>
          <li><a  href="#howItWorks">How It Works</a></li>
          <li><a  href="#pricing">Pricing</a></li>
        </ul>
      </nav>
    </header>

CSS CODE

#header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#nav-list {
  list-style: none;
  display: flex;
  flex-direction: row;
}

.nav-link {
  margin: 1em 1em;
}

@media (max-width: 750px) {

    #header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .nav-link {
    padding: 5px;
  }

}

PAGE PICTURE

CodePudding user response：

You should be applying the padding to <li>, not to <a>. If you change your code to this:

<ul id="nav-list">
    <li ><a href="#features">Features</a></li>
    <li ><a href="#howItWorks">How It Works</a></li>
    <li ><a href="#pricing">Pricing</a></li>
</ul>

The padding should be working properly. If you wanna keep the <a> tags with their classes, you can directly apply the style to the list tags like this:

#nav-list li {
    padding: 5px;
}

Also, take a look at this link here.

CodePudding user response：

You're using bootstrap classes here. You can simply use bootstrap padding classes for padding or if you want margin you can use margin classes. Use px for horizontal padding, py for vertical padding. Use mx for horizontal margin, my for vertical margin. Following with the values (mx-1 to mx-5) or (px-1 to px-5).

<ul >
<li >
  <a  href="#">Link</a>
</li>
<li >
  <a  href="#">Link</a>
</li>
<li >
  <a  href="#">Link</a>
</li>
<li >
  <a  href="#">Disabled</a>
</li>