css

Why is there gap before my Unordered list?

I want to achieve this: enter image description here

I have achieved this: enter image description here

There is gap on left of the navigation. I don't understand why it is there.

My markup:-

<footer>
<div id="contact-info">
<p><span id="footer-text-big">Contact Us:</span></p>
<p>
Tel: +974 44151991<br />
P.O.Box: 202315, Doha – Qatar<br />
E-mail: hajrisalemal@gmail.com<br />
krishnabhw1@yahoo.com
</p>
</div>
<div id="footer-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="photogallery">Photo Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="copyright">
Copyright &copy; 2014 SALEM AL HAJRI. All Rights Reserved.
</div>
</footer>

My CSS:-

footer { height: 158px; color:#FFF; margin-top: 25px; padding-top: 30px; font-size: 11px; font-family:Arial, Helvetica, sans-serif;}
#contact-info { float: right; text-align: right;}
#footer-text-big { font-size:13px;}
#footer-nav { float: left; width: 600px; text-align: left;}
#footer-nav li { display: inline;}
#footer-nav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #ffffff;
text-decoration: none;
margin-right: 30px;
}
#copyright { width: 600px; float: left; text-align: left; margin-top: 65px;}
Solution

  • Lists (ul and ol) have by default padding and margin set. You should change it manually, so if you don't want any margins you should add to your css:

    #footer-nav ul {margin:0; padding: 0;}

    or

    #footer-nav ul {margin-left:0; padding-left: 0;}

    or set some other custom values as for example

    #footer-nav ul {margin-left: 10px; padding-left: 0;}

    In addition I see you use HTML5. You should rather create nav element instead of div id="footer-nav"