图像堆叠在一起而不是内联

Question

I've been at this for days. In my website, the images are stacking up on top of each other, so it appears to be a single image instead of 4. Also, it is displaying itself on top of other elements on the page, like the text. In Dreamweaver it shows up how I want, but in the browser, it shows as described above.

What I want: the four images to display side by side above the page header About Us. Here is the code:

<center>
<span class="images">
<img src="images/aboutUs/longJumpBoy.jpg" alt="longJumpBoy" longdesc="images/aboutUs/longJumpBoy.jpg">
<img src="images/aboutUs/groupPic.jpg" alt="groupPic" width="214" longdesc="images/aboutUs/groupPic.jpg">
<img src="images/aboutUs/kidOnTrack.jpg" alt="kidOnTrack" longdesc="images/aboutUs/kidOnTrack.jpg">
<img src="images/aboutUs/throwingKids.jpg" alt="throwingKids" longdesc="images/aboutUs/throwingKids.jpg">

 </span> 

</center>

    <h1>About Us</h1>        
<br /><br />
    <h2>Who are we?</h2> 
<p>
    The team is a USA Track and Field (USATF) certified running club. We compete locally and nationally. Our athletes are able to train in all disciplines in track and field, but the team is specialized in distance running. Our runners are registered to run in both USATF and Amateur Athletic Union (AAU) league events.
    <br />
    Practices are held primarily on El Paso's East side.
</p>
 <header>
    <h2>Mission Statement</h2>
</header>

Here is the CSS

.images img {
    display:inline-block;
    border-color: rgb(191,224,104);
    border-width: 3px;
    margin: auto
}

EDIT: I edited the code and here is the link to my jsFiddle: http://jsfiddle.net/JaLb7/ . Now, the image in browser displays above the text, but only one of them. Also, when I scroll, the image does not scroll with the page, but rather the text scrolls behind the image.

Image of my issue:

Answer 1

You could use display, text-align and white-space:

Your HTML

<span class="images">
<img src="images/aboutUs/longJumpBoy.jpg" alt="longJumpBoy" longdesc="images/aboutUs/longJumpBoy.jpg">
<img src="images/aboutUs/groupPic.jpg" alt="groupPic" width="214" longdesc="images/aboutUs/groupPic.jpg">
<img src="images/aboutUs/kidOnTrack.jpg" alt="kidOnTrack" longdesc="images/aboutUs/kidOnTrack.jpg">
<img src="images/aboutUs/throwingKids.jpg" alt="throwingKids" longdesc="images/aboutUs/throwingKids.jpg">
 </span> 

Basis CSS to apply

.images {
display:block;
text-align:center;
white-space:nowrap;
}

Notice , should be a block element like <p> or <div> or even <figure> if that's accurate.

<center> should not be used and is totally useless as soon as you know how to apply margin:auto; and , or , text-align:center; .

Answer 2

OK, so this is an amateur mistake. After digging through my stylesheet, I saw I had a img tag definition for styles (not part of a class) - which had a fixed positioning. We are looking much better now.

Thanks for all your help and suggestions, I did clean up my code per your recommendations - which helped in other ways.