Skip to main content
3 de 3
Código movido a snippet, ruido removido
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

Float no funciona

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. He estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco si falta alguna etiqueta o estoy ignorando algo...

     body {
      background-color: beige;
    }
    .nav__responsive-ul {
      display: none;
    }
    nav {
      background-color: #94a7ae;
    }
    .nav__li {
      display: inline-block;
      padding: 0.75rem;
      color: aliceblue;
    }
    .nav__li :hover > a {
      color: #bbb;
    }
    .nav__li :hover {
      color: #bbb;
    }
    .nav__li a {
      color: white;
      text-decoration: none;
    }
    .nav__li i {
      width: 1.875rem;
      box-sizing: border-box;
      text-align: right;
      margin-left: 0.313rem;
    }
    * {
      font-weight: 100;
      font-size: 20px;
    }
    div {
      width: 100%;
      display: inline-block;
    }
    
    h1 {
      font-size: 24px;
    }
    h2 {
      text-align: left;
      font-size: 23px;
      padding: 1.5rem;
    }
    .nav__responsive-button{
        float: right;
    }
    @media only screen and (max-width: 50rem) {
      .nav-ul {
        display: none;
      }
    
      .nav__responsive-ul {
        display: block;
      }
    }
      <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>JSDevs</title>
            <script
              src="https://kit.fontawesome.com/8af7719ad1.js"
              crossorigin="anonymous"
            ></script>
            <link rel="stylesheet" href="css/style.css"
          </head>
          <body>
            <header>
              <nav class="nav">
                <ul class="nav-ul">
                  <li class="nav__li">
                    <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
                  </li>
                  <li class="nav__li">
                    <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
                  </li>
                  <li class="nav__li">
                    <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
                  </li>
                  <li class="nav__li">
                    <i class="fa-solid fa-address-card"></i
                    ><a href="#">Sobre nosotros</a>
                  </li>
                </ul>
                <ul class="nav__responsive-ul">
                  <div class="nav__responsive-button fas fa-bars"></div>
                  <div class="nav__li-container">
                    <li class="nav__responsive-li">
                      <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
                    </li>
                    <li class="nav__responsive-li">
                      <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
                    </li>
                    <li class="nav__responsive-li">
                      <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
                    </li>
                    <li class="nav__responsive-li">
                      <i class="fa-solid fa-address-card"></i
                      ><a href="#">Sobre nosotros</a>
                    </li>
                  </div>
                </ul>
              </nav>
            </header>
          </body>