CSS - Elements stacking vertically not horizontally

Question

I have a row with seven small images and a heading which I need to stack horizontally but they're stacking vertically. This is how it looks -

I'm sure this is really simple but I'm stumped. I'm using reset & skeleton grid. This is the relevant code -

HTML

<section id="products">
        <div class="container">
            <div class="row">
                <div class="twelve columns agencyproducts">
                    <h2>WHAT PRODUCT ARE YOU INTERESTED IN?</h2>
                    <img src="images/production.png" alt="Production" style="width:50px;height:50px;">
                    <h4>2K / 4K PRODUCTION</h4>
                    <img src="images/post-production.png" alt="Post-Production" style="width:50px;height:50px;">
                    <h4>POST PRODUCTION</h4>
                    <img src="images/animation.png" alt="Animation" style="width:50px;height:50px;">
                    <h4>2D / 3D ANIMATION</h4>
                    <img src="images/ADHOC.png" alt="ADHOC" style="width:50px;height:50px;">
                    <h4>ADHOC</h4>
                    <img src="images/interactive.png" alt="Interactive" style="width:50px;height:50px;">
                    <h4>INTERACTIVE & PERSONALISED</h4>
                    <img src="images/tv-adverts.png" alt="TV ADVERTS" style="width:50px;height:50px;">
                    <h4>TV ADVERTS</h4>
                    <img src="images/360.png" alt="360 Video and VR" style="width:50px;height:50px;">
                    <h4>360 VIDEO & VIRTUAL REALITY</h4>
                </div>  
            </div>  

CSS

section#products {
    height: 700px;
    max-width: 100%

}

.row {
    height: 350px;
    max-width: 100%;
}

.agencyproducts {
    position: relative;
    display: block;
    text-align: center;

}

.agencyproducts img {

    position: relative;
    line-height: 1;
    top: 50%;

}

.agencyproducts h4 {

    display: block;
    text-align: center;
    font-size: 10px;

}

Answer 1

The h4 tags which you re using as captions are block elements, which means, their width is 100% by default. Also, you have nothing that associates/unifies them with the images they belong to.

The common way nowadays is to use a figuretag to wrap image and text, and put the text into a figcaptiontag inside that figure tag. Then apply text-align: center; and display: inline-block; to the figure tag to center image and text inside and allow them to appear next to each other:

figure {
  text-align: center;
  display: inline-block;
  max-width: 100px;
  vertical-align: top;
  margin:10px;
}

<figure>
  <img src="http://placehold.it/80x80/cac">
  <figcaption>
    This is an image
  </figcaption>
</figure>
<figure>
  <img src="http://placehold.it/80x80/cac">
  <figcaption>
    This is an image with a longer caption
  </figcaption>
</figure>
<figure>
  <img src="http://placehold.it/80x80/cac">
  <figcaption>
    This is an image
  </figcaption>
</figure>

Answer 2

Images and Headers by default have display set to block, meaning they are on their own lines. float used to be the preferred way of achieving single-line display for block elements but it should be avoided as float has some weird behaviors. Instead we now use display: inline-block; or display: inline; - apply this to the elements you want on a single line and it will make it so!

just example (not copying your code - just simple example script):

HTML:

<div>
    <img src="one.png" class="inlineImg" />
    <img src="two.png" class="inlineImg" />
    <img src="three.png" class="inlineImg" /> 
</div>

CSS:

.inlineImg {display: inline;}

this will display the images on a single line (providing the div is big enough)