Text below image not displaying

Question

FYI I’m noob with code, so as much help you can give is greatly appreciated. So I have some nice css to give me equidistant images, but when I try to add text below each image, it doesn’t display. In Brackets I can see a super thin line below the image, but no text. Tried tweaking css for the text and image div but no luck.

Fiddle is here: https://jsfiddle.net/datCodeTho/feosv4Lv/

Here's the html:

        <div id="container">
  <div><img src="http://www.craighuff.ca/img/STIRR_LOW-FI_RECORD_comp.jpg" id="wire1" alt="Stirr wireframe low-fi record screen">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit </p>
  </div>
  <div><img src="http://www.craighuff.ca/img/STIRR_LOW-FI_RECORD_comp.jpg" id="wire2" alt="Stirr wireframe low-fi record screen"></div>
  <div><img src="http://www.craighuff.ca/img/STIRR_LOW-FI_RECORD_comp.jpg" id="wire3" alt="Stirr wireframe low-fi record screen"></div>
</div>
    <div id="belowImages"></div>

And here's the css:

    #container {

  text-align: justify;
  border: 10px solid black;
  font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
}
#container div {
  width: 30%;

  display: inline-block;
  background: red;
}
#container:after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}
#wire1{
    display: block;
    width: 100%;
}
#wire2{
        display: block;
        width: 100%;
}
#wire3{
        display: block;
        width: 100%;
}
#belowImages {
    display: block;
  height: 300px;
  border: 10px solid black;
  background: red;
  font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
  min-width: 600px;
}

Answer 1

Just define a style your p-tag:

#container p {
  padding: 3px 5px;
  color: white;
  font-size:9px;
}