While working on the contact section of my website, I encountered an issue. Every time I adjust the position of the textboxes and labels by 15em within the wrapper, a horizontal scroll appears. How can I move these elements without triggering the scroll bar?
function scrollDown() {
window.scrollBy(0, 600);
}*{
margin: 0;
border: 0;
text-decoration: none;
list-style: none;
font-family: 'Roboto', 'Segoe UI', 'sans-serif';
scroll-behavior: smooth;
}
a{
padding: .3em;
color: #000;
}
li{
display: inline;
position:relative;
width: 74px;
height: 21px;
left: 130px;
top: 71px;
font-size: 18px;
line-height: 21px;
}
li a:hover{
color: #e48257;
transition: .3s;
}
.title{
font-weight: 700;
font-size: 90px;
position: absolute;
width: 462px;
height: 168px;
left: 171px;
top: 300px;
white-space: nowrap;
color: #252525;
}
span{
color:#e48257
}
img{
position: absolute;
height: 455px;
left: 763px;
top: 190px;
}
button:nth-of-type(2){
position: absolute;
width: 110px;
height: 45px;
left: 310px;
top: 526px;
background: #333C54;
border-radius: 20px;
color: white;
}
button:nth-of-type(1){
position: absolute;
width: 127px;
height: 45px;
left: 171px;
top: 526px;
border: 1px solid #333C54;
box-sizing: border-box;
border-radius: 20px;
background-color: white;
}
.about-us{
position: relative;
top: 54em;
}
.about-us-breadcrumb{
position: absolute;
width: 75px;
height: 21px;
left: 171px;
top: 23px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21px;
color: #8E8E8E;
}
.about-us-text{
position: absolute;
width: 530px;
height: 210px;
left: 171px;
top: 60px;
...
<!DOCTYPE html>
<html lang="en">
<head>
...
</footer>
<script src="app.js"></script>
</body>
</html>Apologies for the messy code, as this is my first attempt at this. Really, really sorry. This additional text is to satisfy Stack Overflow's code-to-text ratio requirements. Unfortunately, I can't provide more meaningful text due to these limitations. Sorry once again.