I am facing an issue with the alignment of my website when viewed on a different resolution. It shifts everything to the right instead of staying centered. I tried setting the overflow to 0% but it didn't solve the problem. Can anyone help me understand why this is happening?
Below is the HTML file for reference:
<html>
<head>
<script type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>
<body>
<div id="banner">
<h2 id="bannertext"> Websites4u </h2>
</div>
<div id="buttonbar">
<a id="homeb" href="webpageone.html">Home</a>
<a id="aboutb" href="fake.html">About</a>
<a id="contactb" href="webpage2.html">Contact Us!</a>
</div>
<div id="mainbody">
<p id="radio">
3gb: <input type="radio" name="age" value ="<3gb"> <br> <br>
4gb: <input type="radio" name="age" value ="4gb"> <br> <br>
8gb: <input type="radio" name="age" value ="8gb"> <br> <br>
16gb: <input type="radio" name="age" value ="16gb"> <br>
</p>
<h4 id="bodytext"> Please Select Your Hardware </h4>
<h3 id="Ram"> Ram </h3>
</div>
</body>
</html>
And here is the corresponding CSS code:
*{
margin:0;
padding:0;
}
h1 {
color:blue;
}
body{
width:1280px;
height:720px;
background-image:url("background colour.jpg");
overflow:hidden;
}
#banner{
position: relative;
height: 50px;
width: 148%;
border: medium solid BFBDBA;
background-color:F1C43E;
margin:0 auto;
}
#bannertext{
color:white;
text-align:center;
font-family:Comic Sans MS, cursive, sans-serif;
margin:0 auto;
}
#buttonbar {
position: relative;
height: 30px;
width: 148% ;
border: medium solid BFBDBA;
background-color:lightgrey;
color:white;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
font-style:bold;
}
#homeb {
position: relative;
left: 450px;
}
#aboutb{
position: relative;
left: 500px;
}
#contactb{
position: relative;
left: 550px;
}
a {
color: white;
font-weight:bold;
}
a:hover {
COLOR: orange;
font-weight:bold;
}
#bodytext{
position: relative;
top:50px;
left:50px;
color:red;
font-size:35px;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
}
#mainbody{
position: relative;
background-color: white;
height: 1000px;
width: 80%;
left: 30%;
top: 5px;
border:medium solid F1C43E;
}
#radio{
position: absolute;
top: 240px;
left:100px;
font-size: 18px;
margin:0 auto;
}
#Ram{
position: absolute;
top: 176px;
left: 100px;
font-size: 30px;
color: Green;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
}