He estado tratando de crear una barra de navegación y que todo va bien, excepto uno de los problemas que aparecen cuando el ancho de la ventana es entre 768px y 922px como el contenido en el interior de la nav elemento que queda fuera de su contenedor desde el lado derecho .He intentado muchas soluciones, pero ninguno de ellos funcionó ,y aún no sé 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........>>>>>>> */