Please note the nav utilises JS as well as the footer text. The rest is all HTML/CSS. I can show the JS if needs be but I believe this issue lies either with the HTML or the CSS.
In the preview of the site, the navigation (nav01/menu) and the body/main area are shifted to the right slightly (approximately by 10px). So instead of the navigation and main red area being in line with the banner image/bg they're offset to the right. I'm assuming this is what has caused a horizontal scroll bar (there's approximately 400px of additional blank space on the right hand side of the website).
I've set margins to 0 in the specific areas but these left and right margins remain.
The second issue is with what will become a hidden content/dropdown area (currently visible) and the page divider for the next page (scrolling single page). In each of these instances, pagedown and hidden box, I've specified the width as 100% yet they remain central and don't even stretch to the actual image sizes.
Any help with these 2 problems would be appreciated. I'm sure it's something simple but I just can't seem to find it after hours of trying.
..............................
@fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
}
@fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
font-weight: thin;
}
#container {
position: absolute;
top: 0px;
left: 0px;
background-color: #73008C;
background-image: url("banner.jpg");
background-size: 100%;
width: 100%;
height: 800px;
content: 60px;
padding: 0px;
border: 5px #73008C;
margin-left: 0px;
margin-right: 0px;
z-index: -3;
}
#header {
position: absolute;
background-color: rgba(255, 255, 255, 0.4);
width: 100%;
height: 12%;
margin: auto;
z-index: 1;
}
#logo {
position: relative;
border: 0px;
margin-top: 9px;
z-index: 2;
}
#nav01 {
position: absolute;
background-color: #374754;
width: 100%;
height: 40px;
padding: 0px;
margin-left: 0px;
margin-top: 85px;
margin-right: 0px;
border-radius: 0px 0px 6px 6px
}
ul#menu {
font-family: Swisz;
position: relative;
background-color: #374754;
padding: 0;
margin-top: 13px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu li {
display: inline;
margin-right: 5px;
}
ul#menu li a {
background-color: #374754;
padding: 10px 10px;
text-decoration: none;
color: #ffffff;
border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
color: white;
font-style: bold;
background-color: #d83030;
}
#overlay {
font-family: Swisz;
position: relative;
margin-left: auto;
margin-right: auto;
top: 250px;
bottom: 200px;
width: 30%;
height: 30%;
background-color: #d83030;
padding: 15px 15px;
color: #ffffff;
border-radius: 8px 8px 8px 8px;
}
#info {
position: relative;
left: 400px;
top: 280px;
}
body {
font-family: "Helvetica", Verdana, sans-serif;
font-size: 12px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
padding: 0px;
}
#main {
position: absolute;
top: 600px;
padding: 10px;
padding-left: 200px;
padding-right: 200px;
background-color: #d83030;
background-position: top center;
margin: 0;
}
#h1 {
font-family: Swisz;
text-shadow: 5px 5px 5px ##374754;
color: #ffffff;
text-align: center;
font-size: 30px;
}
#h3 {
font-family: Helvetica, sans-serif;
color: #ffffff;
text-align: left;
font-size: 12px;
}
.h5 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 16px;
}
#hiddenbox {
position: relative;
width: 100%;
height: 298px;
background-image: url("hidden_bg.jpg");
background-repeat: repeat-x;
padding: 5px;
padding-top: 7px;
margin: 0;
text-align: left;
}
.pagedown {
position: relative;
width: 100%;
padding: 0;
top: 900px;
margin: 0;
}
#sub {
position: relative;
padding-left: 20%;
padding-right: 20%;
padding-bottom: 10%;
padding-top: 1%;
color: #374754;
top: 1200px;
background-color: #ffffff;
margin: 0;
#h4 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 40;
}
#footer {
position: relative;
color: #ffffff;
margin-bottom: 0px;
margin-top: 100px;
}<!DOCTYPE html>
<html>
<head>
<title>TITLE HEREd</title>
<link href="Site.css" rel="stylesheet">
<script src="Script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="logo.png" alt="Logo" style="width: 20%; height: 20%"></img>
</div>
</div>
</div>
<nav id="nav01"></nav>
<div id="overlay">
<h1>Filler title text here<h1>
<h2>Filler filler filler filler filler</h2>
</div>
<div id="info">
<img src="seehow.png" alt="See How" style="width:345px;height:240px">
</div>
<div id="main">
<h1>LIPSUM</h1>
<h2>main content will al be placed here</h2>
<img src="wilfcent.png" alt="Wilf" style="width:345px;height:428px">
<div id="hiddenbox">
<h3>drop down content/hiddent content here/h3>
<img src="promo.png" alt="Promotion" style="width:321px;height:176px"></img>
</div>
<img src="pagedown.gif" alt="Page down" style="width:100%;height:68px"></img>
</div>
<div id="sub">
<h4> How It Works </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut turpis sapien. Proin tempus nibh ac rhoncus congue. Nullam pretium placerat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sed est vitae libero placerat tristique. Aliquam pulvinar convallis mi, vitae consequat tortor pellentesque ut. In lacinia, ex vel accumsan viverra, est ex efficitur justo, pulvinar luctus mi leo nec risus. Sed nec tellus bibendum, convallis enim at, elementum lectus. Fusce eu enim blandit, volutpat eros lobortis, auctor odio. Praesent tristique sem elit, nec consequat tortor placerat at. Nullam eu arcu et ex iaculis feugiat ut quis enim. Nulla quis libero placerat, accumsan nulla et, laoreet magna. Sed congue ut nunc maximus gravida.</p>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>The first problem is quite simple. All browser handle html tags differently, and most of the browsers for example have given the <body> a margin, which causes you the 10px.
Simply add this to your css file:
body, html {
margin: 0;
padding: 0;
}
The reason for the 400px on the right side is your <div id="info"> tag. This div got the attribute (set by the browsers default) div {display: block}, which says the div does block the full width, that is available by the screen size.
Then you gave it the css attributes position: relative; left: 400px. That means, that the div, as said above, already has the full width plus the 400px added as space from the left. Because of that its overscaled.
A smoother version is to change the leftinto padding, so it becomes:
#info {
position: relative;
padding-left: 400px;
top: 280px;
}
Your second issue is caused by the padding-(left/right)attributes on your #main div. You can simply remove them and your div gets the full width of the page.
Last, you have got one missing <symbol in this line before the closing </h3> tag.
<h3>drop down content/hiddent content here/h3>
Hope this helps, feel free to ask for further information.
Best regards, Marian.