I want to achieve this:
![enter image description here](https://i.stack.imgur.com/9tdBT.jpg)

I have achieved this:
![enter image description here](https://i.stack.imgur.com/u1A4b.jpg)

There is gap on left of the navigation. I don't understand why it is there. Page is live at <http://goo.gl/K17Fjs>

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;}

```