I have a small gap between everything in my webpage and the browser's edge. I must have added some code that has done this, but am unsure what did. What do I do to remove this? Also in my navigation bar, the last link on the right hand side, has a small gap that is not highlighted on hover on the very edge on the right side of it.
I also need help with the gap between the navigation bar + header and the side banners. How do I remove that gap?
HTML:
<!doctype html><html lang="en"><head><meta charset="utf-8" /><title>Play - Learn - Grow</title><link rel="stylesheet" href="main.css"></head><body class="body"><span class="headers_t"><span class="banner_h"><img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" /></span><nav><ul class="nav"><li><a href="index.html">Home</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact Us</a></li><li><a href="membership.html">Become a Member</a></li><li><a href="borrow.html">Borrow Toys</a></li><li><a href="policies.html">Our Policies</a></li><li><a href="sitemap.html">Site Map</a></li></ul></nav></span><span class="banner_l"><img src="Images\Side_Banner.jpg" alt="Banner" /></span><span class="banner_r"><img src="Images\Side_Banner.jpg" alt="Banner" /></span><h2 class="headers">Welcome to the Home Page!</h2><div class="container"> Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance their cognitive, social, emotional and physical development in the important first six years of their lives.<br><br><span class="Links">Be sure to check out our Wikispace site with more information <a href="http://mysocialmediatools-pn.wikispaces.com/">here</a>!</span></div><div id="content"></div><div id="footer"> Copyright © 2013</div></body></html>CSS:
/* Entire Document CSS */html{ height: 100%;}/* Header CSS */.headers_t{ /* Add something here */}.headers{ color: #FFD89A; text-align: center; padding: 10px;}/* Body CSS */.body{ background-color: #61B329; height: 50%; color: #FFFFFF;}.container{ margin: 0 auto 0 auto; width: 50em; text-align: center; padding-bottom: 500px; height: 50%;}/* Navigation CSS */.nav { display: inline-block; background-color: #00B2EE; border: 1px solid #000000; border-width: 1px 0px; margin: 0; padding: 0; width: 100%;}.nav li { list-style-type: none; width: 14.28%; float: left;}.nav a { display: inline-block; padding: 10px 0; width: 100%; text-align: center;}/* Banner / Picture CSS / Text in Images */.banner_l{ float: left;}.banner_r{ float: right;}.banner_h, img{ display: block; width: 100%;}/* Footer CSS */#footer { clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em;}#content { padding-bottom: 3em;}/* Link CSS */a:link{ color: #FFFFFF; text-decoration: none;}a:visited{ color: #FFFFFF; text-decoration: none;}a:hover{ background-color: #028482; color: #FFFFFF; text-decoration: underline;}a:active{ background-color: #FCDC3B; color: #AA00FF; text-decoration: overline;}.Links A:hover{ color: #028482; background-color: transparent; text-decoration: underline overline;}Disregard the .headers_t id in the css, which I am editing right now...unless that's the cause.
The JSFiddle link is here.
