Ho cercato di creare una barra di navigazione e va tutto bene tranne un problema che appaiono quando la larghezza della finestra è tra 768px e 922px come il contenuto all'interno dell'elemento nav si al di fuori del suo contenitore, dal lato destro .Ho provato molte soluzioni, ma nessuno di loro ha funzionato ,e non so nemmeno la causa del problema.
<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>test Website</title>
<!-- font awesome -->
<script src="https://kit.fontawesome.com/3e0066cf06.js" crossorigin="anonymous"></script>
<!-- font awesome -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="first">
<div class="container">
<h1>Test Website</h1>
<nav>
<i class="fas fa-bars fa-3x menu"></i>
<ul>
<li><a href="" class="active">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Help</a></li>
</ul>
<div class="search">
<i class="fas fa-search fa-3x"></i>
</div>
</nav>
</div>
<div class="slider">
<div class="content-text">
<h2> Who are we?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
@import url('https://fonts.googl-3eapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');
*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
html{
font-family: Montserrat;
font-size: 10px;
scroll-behavior: smooth;
}
ul{
list-style: none;
}
/* global frameWork */
.container {
padding-left: 15px;
padding-right: 15px;
margin-inline: auto;
position: relative;
min-height: 115.59px;
}
/* Small */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium */
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
@media (min-width: 1200px) {
.container {
min-width: 1170px;
}
}
/* End Global Rules */
/* Start Components */
@media (max-width: 767px) {
}
.first{
min-height: 100vh;
position: absolute;
min-width: 100%;
}
.first::after{
content: "";
position: absolute;
min-height: 100vh;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.5)),url(images/evgeni-tcherkasski-SHA85I0G8K4-unsplash.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
}
.container{
display: flex;
justify-content: space-between;
align-items: center;
color: white;
/* position: relative; */
}
nav{
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
}
.container::after{
content: "";
position: absolute;
width: calc(100% - 30px);
height: 5px;
background-color: white;
left: 15px;
right: 15px;
bottom:14px;
}
nav ul{
display: flex;
}
nav ul li a{
display: block;
color: white;
text-decoration: none;
font-size: 2rem;
padding: 30px 40px;
transition: all .2 ease-in-out;
position: relative;
z-index: 2;
}
nav .search{
color: white;
width: 50px;
height: 70px;
margin-left: 30px;
position: relative;
border-left: 3px solid white;
}
nav .search i{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
nav ul li a.active,
nav ul li :hover{
color: #19c8fa;
border-bottom: 5px solid #19c8fa;
}
/* <.........ressponsive Navbar........>>>>>>> */
@media (min-width: 767px) {
nav .menu{
display: none;
}
}
@media (max-width: 768px) {
nav ul{
display: none;
}
nav ul.clicked{
display: flex;
flex-direction: column;
position: fixed;
width: 100%;
top: 20%;
left: 0;
background-color: rgba(0,0,0,.3);
}
}
.slider{
display: flex;
flex-direction: row;
justify-content: flex-end;
color: white;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color:#19c8fa ;
height: 250px;
width: 600px;
}
.content-text{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50px;
}
.content-text h2{
font-size: 3rem;
font-weight: bold;
margin-bottom:5px ;
}
.content-text p{
font-size: 1.5rem;
line-height: 20px;
text-transform: uppercase;
}
/* <.........ressponsive Navbar........>>>>>>> */