Salve a tutti.
sto creando il themeplate di un sito per svago e per fare un po di esperienza in campo ma mi sono trovato davanti ad un problema che è sicuramente stupido ma che non so come risolvere.
praticamente scrollando sull'estremo lato destro del mio sito si crea una piccola riga nera che non so a quale elemento appartenga ma che vorrei rimuovere in modo da eliminare la possibilitàdi poter scrollare a destra sul sito.
incollo qui il codice, grazie in anticipo
sto creando il themeplate di un sito per svago e per fare un po di esperienza in campo ma mi sono trovato davanti ad un problema che è sicuramente stupido ma che non so come risolvere.
praticamente scrollando sull'estremo lato destro del mio sito si crea una piccola riga nera che non so a quale elemento appartenga ma che vorrei rimuovere in modo da eliminare la possibilitàdi poter scrollare a destra sul sito.
incollo qui il codice, grazie in anticipo
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="stylesheet" href="stile.css">
<link rel="stylesheet" href="animate.css">
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">DOWNLOAD</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div class="searchb">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<hr align="center" size="1" width="100%" color="#fff" noshade>
</div>
<div class="box">
<h1>Hi Friend,</h1>
<hr align="center" size="1" width="100%" color="black" noshade>
<div class="content">
<img src="https://picsum.photos/200/100" alt="">
</div>
<div class="contentb">
</div>
</div>
</body>
</html>
CSS:
@font-face {
font-family: 'Raleway';
src: url('Raleway-Thin.woff2') format('woff2'),
url('Raleway-Thin.woff') format('woff'),
url('Raleway-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
body,html{
min-height: 100%;
}
body{
background-color: #000;
margin: 0;
padding: 0;
border: 0;
}
hr{
margin: 0;
}
.nav{
background-color: black;
text-align: right;
margin: 0 auto;
}
.searchb{
position: absolute;
top: 1%;
background: white;
border-radius: 40px;
padding:10px;
margin-left:
}
.search-btn{
color: white;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: black;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.searchb:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.searchb:hover > .search-btn{
background: black;
}
.search-txt{
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
.box{
background-color: rgba(0,0,0,1);
margin: solid green;
position: absolute;
width: 100%;
height: 100%;
}
.box > h1{
font-family: 'Raleway';
font-size: 100px;
color: rgb(255,255,255);
text-align: center;
font-weight: lighter;
margin-top:140px;
margin-bottom: 120px;
}
.content{
background-color: #f1f1f1ff;
margin: 0;
height: 60%;
width: 100%;
}
.content>img{
float: right;
}
.contentb{
background-color: #000;
height: 50%;
width: 100%;
}
ul{
margin: auto;
}
li{
display: inline-block;
list-style: none;
padding: 30px 50px 30px 50px;
font-family: sans-serif;
transition: 0.4s;
}
a{
color: white;
text-decoration: none;
}