I am currently facing an issue with my webpage scrolling to the right.
This behavior is not acceptable as web pages are not supposed to scroll to the right, correct?
Could someone assist me in eliminating this unwanted scroll from my page?
I have only utilized HTML5 and CSS for development.
Below is a snippet from the CSS file:
/***********************************Custom Layout****************************/
*{
font-family: 'Open Sans', sans-serif;
}
.bg{
position:absolute;
top:0px;
background: url('1.jpg');
height: 700px;
width:100%;
opacity:1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
top:0px;
left:0px;
margin:0px;
right:0px;
}
/*************Top Header and Navigation Bar******************************/
header{
position:relative;
top:20px;
left:50px;
font-size:1.3em;
}
nav{
position:relative;
left:600px;
top:-47px;
}
nav ul li{
list-style:none;
display:inline;
padding:10px;
font-size:1.1em;
}
a{
color:#444;
text-decoration:none;
}
a:hover{
border-bottom: 4px solid #438d80;/*#438d80*/
}
#message{
position:relative;
top:50px;
left:450px;
}
#message p{
color:white;
font-size:30px;
}
p{
line-height:8px;
}
/*
.button{
height:40px;
width:200px;
background:#438d80;
border:none;
cursor:pointer;
font-size:20px;
position:relative;
left:490px;
top:55px;
color:#eee;
font-weight:100;
letter-spacing:1.7px;
border-radius:5px;
}
.button:hover{
color:white;
background:#ff9933;
} */
#earnButton{
position:realtive;
top:55px;
left:-100px;
background:#438d80;
}
#container2{
position:absolute;
top:710px;
text-align:center;
}
#container2 > h1{
text-align:center;
}