I am currently dealing with an issue where the navigation on my website is all messed up. Each link, except for the home link, has an extra empty box to the left of it. Can you take a look at my code and see if there's a quick fix for this problem? (I can provide a picture if needed)
Here is the HTML5:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ChonBonStudios</title>
<link rel="stylesheet" href="Main.css">
<!-- Including the Lobster font from Google's Font Directory -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<!-- Enabling HTML5 support for Internet Explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="Website">
<header>
<div id="Logo">
<a href="ChonBonStudios-Home.html"><img id="Company" src="ChonBonStudios Logo.png"></a>
</div>
</header>
<!-- The navigation menu starts here -->
<ul class="fancyNav">
<li id="home"><a href="ChonBonStudios-Home.html" class="homeIcon" >Home</a></li>
<li id="about"><a href="ChonBonStudios-About.html"><li>About</a></li>
<li id="android"><a href="ChonBonStudios-Android.html"><li>Android Products</a></li>
<li id="apple"><a href="ChonBonStudios-Apple.html"><li>Apple Products</a></li>
<li id="computer"><a href="ChonBonStudios-Computer.html"><li>Computer Services</a></li>
<li id="youtube"><a href="ChonBonStudios-Youtube.html"><li>Youtube</a></li>
<li id="contact"><a href="ChonBonStudios-Contact.html"><li>Contact Us</a></li>
</ul>
<section>
</section>
<aside>
</aside>
</div>
<div id="MainFooter">
<footer>
Copyright Austin Choncek 2013
</footer>
</div>
</body>
</html>
<!-- CSS code starts here -->
body{
background-color: #625D5D;
margin: 0px;
padding: 0px;
font-family: Comic Sans MS;
font-style: normal;
font-size: 14px;
color: #1cf1cb;
}
/* Styling for the main website container */
#Website{
background-color: #fd4c1d;
width: 1000px;
border: #1a1a1a solid 2px;
border-bottom: none;
border-top: none;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 10px 0 0 0;
}
/* Styling for the logo */
#Logo{
display: block;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: none;
width: 690px;
height: 60px;
}
.fancyNav{
/* Affects the UL element */
overflow: hidden;
display: inline-block;
}
/* Styling for each list item in the navigation menu */
.fancyNav li{
background-color: #f0f0f0;
background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
/* More style properties */
}
/* More CSS styles... */