Hi

I'm still fairly new to coding, and I'm having a problem that In my mind should be so simple.

I want to align 5 linked images side by side with only a small amount of padding in between. I have specified that there should be no padding or margins in my css and even tried in my html but nothing seems to work. I just can't figure out what I'm doing wrong.

Any help would be appreciated.

This is the website: http://kieronhuntdesign.com/index.html

here is my html:

<a href="about.html"><img src="images/button_1.png" alt="about me" width="300" height="200" /></a>

<a href="design.html"><img src="images/button_2.png" alt="design" width="300" height="200"/></a>

<a href="illustration.html"><img src="images/button_3.png" alt="illustration" width="300" height="200" /></a>

<a href="photography.html"><img src="images/button_4.png" alt="photography" width="300" height="200" /></a>

<a href="contact.html"><img src="images/button_5.png" alt="contact" width="300" height="200" /></a>

Hello viciouskitten,
Float those and you'll be able to get them closer together. Look at it this way - #container {
width: 840px;
margin: 0 auto;
/*clear: right;
display: inline;
padding: 0px 0px 0px 0px;
margin : 0;
margin-left:auto;
margin-right:auto;
float: center;*/
}
#container a {display: block;}
#container img {float: left;}

Thank you excavator, i tried that then realised quite late that the problem was not with my code but with the images. They are png and had been saved (not by me!) with space around them, which for some reason was showing up. I cropped them to the right size and all is now working.

Thank you for taking the time to reply :)