Estoy intentando que mi barra de navegación cuente con las opciones a la izquierda e "iniciar sesion" esté a la derecha.
He probado con float, margin, padding pero no logro hacerlo. También he probado creando un id para los botones y asi trabajar con ellos individualmente pero me descuadra el nav.
Se que es mucho código pero he estado pensando que el error puede estar en la estructura html quizás.
/*Configuracion general de pagina*/
*{
padding: 0%;
margin: 0%;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
/*Barra de Navegacion*/
nav{
background: #8bc34a;
height: 80px;
width: 100%;
}
.enlace{
position: absolute;
padding: 10px 0px;
margin-left: 2%;
width: 50px;
}
.logo{
height: 60px;
border-radius: 50px;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
}
nav ul li a{
color: white;
font-size: 18px;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 7px 15px;
text-transform: uppercase;
}
#sesion{
background: #00bcd4;
border-radius: 50px;
border: #dcedc8 solid 5px;
}
/*Hovers de Barra de Navegacion*/
.logo:hover{
border: #00bcd4 solid 2px;
transition: .2s;
}
#sesion:hover{
color: #00bcd4;
background: #dcedc8;
border: #00bcd4 solid 5px;
transition: .5s;
}
.boton:hover{
color: #00bcd4;
transition: .5s;
}
/*Cosas que dejo pre hechas para funcionalidades de mas adelante uwu*/
.checkbtn{
font-size: 30px;
color: #fff;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
/*Seccion de contenido*/
section{
background: url(fondo.jpg) no-repeat;
background-size: cover;
background-position: center center;
height: calc(100vh - 80px);
}
section{
background: url(img/junta-propietarios-imgEs20200901012745.jpg) no-repeat;
background-size: cover;
background-position: center center;
opacity: 0.5;
height: calc(100vh - 30px - 80px);
}
/*Footer*/
footer{
background: #757575;
height: 30px;
width: 100%;
}
.texto{
display: inline-block;
color: white;
font-size: 12px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 7px 20px;
}
#instituto{
float: right;
}
<!DOCTYPE html>
<html lang="es">
<head>
<!--MetaDatos, Titulo y Conecciones(Librerias)-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Index_meh.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<title>Papaya | Home</title>
</head>
<body>
<!--Navegacion-->
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn"><i class="fas fa-bars"></i></label>
<a href="#" class="enlace"><img src="img/images.jpg" class="logo" alt="No se encuentra imagen"></a>
<ul>
<li><a class="boton" href="#">Quienes Somos</a></li>
<li><a class="boton" href="#">Galeria</a></li>
<li><a class="boton" href="#">Contacto</a></li>
<li><a id="sesion" href="#">Iniciar Sesion</a></li>
</ul>
</nav>
<!--Contenido-->
<section></section>
<!--Footer-->
<footer>
<p class="texto">Cesar Aros | Andres Nuñez | Mario Mora</p>
<p class="texto" id="instituto">Instituto Santo Tomas | Informatica</p>
</footer>
</body>
</html>