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