the navigation bar isn't included or aligned with my header for some reason-CodePudding

I'm pretty new to using css and html. I don't know why the nav part doesn't have the same background and it's not at the same height as the logo. I'd really appreciate the help!

body{
   font-family: sans-serif;
}

header{
    background-color: #14597f;
    height: 60px;      
}
nav ul{
    list-style: none;
    text-align: right;   
}
nav li{
    display: inline-block;
}
nav a{
    color: #ffff;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 10px;   
}
nav a:hover{
    background-color: #ca0ed1 ;
}

.active{
    background-color: #1fb5e9;
    border-radius: 4px;

}

<header>
    <a href="./index.html" >
      <img  src="assets/img/logo.svg" alt="logo" width="200px">
    </a>
    <nav> 
      <ul>
        <li><a  href="index.html"> Accueil</a></li>
        <li><a href="products.html"> Produits</a></li>
        <li><a href="contact.html"> Contact</a></li>
        <li><a  href="./shopping-cart.html" title="Panier">
              <span >
                <i ></i>
                <i ></i>
              </span>
              <span >3</span></a>
        </li>
      </ul>
    </nav>
  </header>

CodePudding user response：

What I've done is following:

header {
  display: flex;
  justify-content: space-between;
  align-items:center;

}

and removed display: block; from nav a

Hopefully this makes sense and it doesn't need explanation. If yes, tell me, I will explain it to you.

This way, it's fixed. Full code:

body{
   font-family: sans-serif;
}

header{
    background-color: #14597f;
    height: 60px;      
}

header {
  display: flex;
  justify-content: space-between;
  align-items:center;

}
nav ul{
    list-style: none;
    text-align: right;   
}
nav li{
    display: inline-block;
}
nav a{
    color: #ffff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 10px;   
}
nav a:hover{
    background-color: #ca0ed1 ;
}

.active{
    background-color: #1fb5e9;
    border-radius: 4px;

}

<header>
    <a href="./index.html" >
      <img  src="assets/img/logo.svg" alt="logo" width="200px">
    </a>
    <nav> 
      <ul>
        <li><a  href="index.html"> Accueil</a></li>
        <li><a href="products.html"> Produits</a></li>
        <li><a href="contact.html"> Contact</a></li>
        <li><a  href="./shopping-cart.html" title="Panier">
              <span >
                <i ></i>
                <i ></i>
              </span>
              <span >3</span></a>
        </li>
      </ul>
    </nav>
  </header>

CodePudding user response：

you can use flex with space between and align item center.

* {
    border: 1px solid red;
}

body{
    font-family: sans-serif;
 }
 
 header{
     background-color: #14597f;
     height: 60px;   
     display: flex; 
     justify-content: space-between;  
     align-items: center;
 }

 nav ul{
     list-style: none;
     text-align: right;   
 }
 nav li{
     display: inline-block;
 }
 nav a{
     color: #ffff;
     display: block;
     text-transform: uppercase;
     font-weight: bold;
     padding: 10px 10px;   
 }
 nav a:hover{
     background-color: #ca0ed1 ;
 }
 
 .active{
     background-color: #1fb5e9;
     border-radius: 4px;
 
 }

<header>
    <a href="./index.html" >
      <img  src="assets/img/logo.svg" alt="logo" width="200px">
    </a>
    <nav> 
      <ul>
        <li><a  href="index.html"> Accueil</a></li>
        <li><a href="products.html"> Produits</a></li>
        <li><a href="contact.html"> Contact</a></li>
        <li><a  href="./shopping-cart.html" title="Panier">
              <span >
                <i ></i>
                <i ></i>
              </span>
              <span >3</span></a>
        </li>
      </ul>
    </nav>
  </header>