Skip to main content
2 de 3
se añadieron 1095 caracteres en el cuerpo

Float no me funciona!

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. Código de novato, aprendiz!! Acepto todo tipo de sugerencias! he estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco se falta alguna etiqueta o estoy ignorando algo..

perdon por esto, pero no me deja enviar la pregunta...

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. Código de novato, aprendiz!! Acepto todo tipo de sugerencias! he estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco se falta alguna etiqueta o estoy ignorando algo..

Lo que quiero es que el "Bar o bars" me quede a la derecha, pero no lo consigo. Código de novato, aprendiz!! Acepto todo tipo de sugerencias! he estado probando y leyendo mi código, y la verdad que no encuentro el error, desconozco se falta alguna etiqueta o estoy ignorando algo..

  <!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>
    
CSS:



 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;
  }
}