I am trying to preview my website in Chrome however it seems that the website is only taking up the central portion of the page and leaving two gaps either side. Below is my code:
@charset "utf-8";
/* CSS Document */
article, aside, figure, footer, header, nav, section {
display: block;
}
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background-color: #CFF;
margin: 0px;
padding: 0px;
}
#container {
width: 840px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#Logo {
background-image: url(pictures/Logo_2.png);
background-repeat: no-repeat;
height: 80px;
width: 100%;
}
#Logo hgroup {
position: absolute;
top: -500px;
}
nav {
padding-top: 100px;
}
ul {
padding:0;
margin:0;
}
nav ul {
list-style: none;
margin-bottom: 15px;
font-weight: bold;
font-size:20px;
}
nav ul li {
float: left;
-webkit-transition-duration:.1s;
-webkit-transition-property:margin-top;
-webkit-transition-timing-function:ease-in-out;
-o-transition-duration:.1s;
-o-transition-property:margin-top;
-o-transition-timing-function:ease-in-out;
-moz-transition-duration:.1s;
-moz-transition-property:margin-top;
-moz-transition-timing-function:ease-in-out;
transition-duration:.1s;
transition-property:margin-top;
transition-timing-function:ease-in-out;
}
nav ul a {
display: block;
width:140px;
padding: 10px;
text-align:center;
text-decoration: none;
color: #fff;
border: 2px solid #618A37;
margin: 5px 0px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
-moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
-webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
text-shadow: rgba(0,0,0,0.8) 1px 1px 1px;
}
nav ul a:link, nav ul a:visited {
background: rgba(255,255,255,0.2);
}
nav ul a:hover, nav ul a:active, nav ul a:focus {
background: rgba(255,255,255,0.4);
}
#maincontent {
margin-top: 40px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#vision {
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:32px;
font-weight:bold;
line-height:1.2;
background-image:url(../images/lrg_hero.jpg);
background-repeat:no-repeat;
width: 409px;
height:60px;
padding:60px 370px 0 40px;
margin-bottom:20px;
}
.pod {
background: #cff;
padding: 5px;
width: 244px;
float:left;
margin-right: 13px;
}
.podContent {
margin-top:10px;
width: 244px;
height:181px;
overflow:hidden;
}
.pod h1 {
background: #CCC;
color: #000;
padding:5px;
background-position:95%;
font-size:16px;
font-weight:normal;
margin: 0 0 13px 0;
}
a.block {
text-decoration:none;
display:block;
}
footer {
padding: 10px 0;
clear:both;
color: #fff;
}
footer p {
margin:0 0 5px 0;
}
#phone {
font-weight:bold;
color: #000;
}
#facebookTwitter {
float:right;
margin-right:25px;
}
Can you see something wrong?
Thanks
