0

No puedo alinear horizontalmente mi header

este es el código HTML:

  <header class="header">
    <div class="logo">
      <img src="./images/logo.png" alt="logo">
      <nav class="">
        <ul class="navLinks">
          <li><a href="./pages/information.html">Conocenos</a></li>
          <li><a href="./pages/clients.html">Clientes</a></li>
        </ul>
      </nav>
      <a href="./pages/contact.html" class="btn"><button>Contacto</button></a>
    </div>
  </header>

y pasamos al SCSS

.header{
    background-color: $firstColor;
    width: 100%;
    height: 85px;
    padding: 5px, 10%;
    .logo{
        margin-right: auto ;
        cursor: pointer;
        img {
            height: 70px;
            width: auto;
            transition: all 0.3s; 
            padding: 15px 20px;      
        }
        img:hover{
            transform: scale(1.2);
        }
    }         
    .navLinks {
        list-style: none;

    }
    li{
        display: inline-block;
        padding: 0px 20px;
    }
    li:hover{
        transform: scale(1.2);   
    }
    a{
        font-size: 20px;
        text-decoration: none;
        color: beige;
    }
    a:hover{
        color: $hoverColor;
    }

    .btn{
        button{
            font-weight: 700;
            color: $firstColor;
            padding: 9px 25px;
            background-color: $secondaryColor;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease 0s;
            margin-left: 15px;
        }
        

por lo que me queda el logo alineado en el header pero luego los link por fuera y uno debajo del otro. lo que quiero es que quede el logo a la izquierda, luego los links alienados a la derecha pero todo a la vez alineado horizontalmente dentro del header Muchas gracias por cualquier ayuda que me brinden!!

1 respuesta 1

0

Para alinear horizontalmente el logo y los enlaces dentro del encabezado (header), puedes utilizar la propiedad display: flex en la clase .logo y en la clase .navLinks. Además, puedes utilizar la propiedad justify-content: space-between en la clase .logo para que el logo se alinee a la izquierda y los enlaces se alineen a la derecha.

Aquí está el código SCSS modificado:

.header {
  background-color: $firstColor;
  width: 100%;
  height: 85px;
  padding: 5px 10%;

  .logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    img {
      height: 70px;
      width: auto;
      transition: all 0.3s;
      padding: 15px 20px;
    }

    img:hover {
      transform: scale(1.2);
    }
  }

  .navLinks {
    display: flex;
    align-items: center;
    list-style: none;
  }

  li {
    display: inline-block;
    padding: 0px 20px;
  }

  li:hover {
    transform: scale(1.2);
  }

  a {
    font-size: 20px;
    text-decoration: none;
    color: beige;
  }

  a:hover {
    color: $hoverColor;
  }

  .btn {
    button {
      font-weight: 700;
      color: $firstColor;
      padding: 9px 25px;
      background-color: $secondaryColor;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s ease 0s;
      margin-left: 15px;
    }
  }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.