HTML 5 alignment of images

I am trying to get 4 images to line up with text centered under them. I have been able to get them close but they are still aligning slightly off. I am still trying to get the hang of HTML 5, and have tried to find some others that have had the same issue but have not had much luck. Any advice would be great since I have hit a brick wall. I will attach a screen shot of my page.

#navigation {
  height: 40px;
  font-size: 20px;
  font-family: Verdana;
  font-weight: bold;
  text-align: center;
  background-color: #000000;
}

main {
  margin: 0 210px 0 160px;
  padding: 1px 10px 20px 10px;
  background-color: #FFFFFF;
  display: block;
  color: #000000
}

body {
  background-color: #FFFFFF;
  margin: 0;
}

header {
  background-color: #000000;
  color: #FFFFFF;
  text-align: right;
  box-sizing: border-box;
  display: block;
  height: 120px;
  padding: 0 20px;
  border-bottom: 2px solid;
}

aside {
  display: block;
  box-sizing: border-box;
  float: right;
  width: 150px;
}

footer {
  display: block;
  box-sizing: boreder-box;
  font-size: .70em;
  color: #FFFFFF;
  background-color: #000000 padding-top: 10px;
  clear: both;
}

#container {
  background-color: #969696;
  color: #000000;
  min-width: 960px;
  font-family: Verdana, Arial, sans-serif;
}

#navigation ul {
  height: auto;
  padding: 5px 20px;
  margin: 1px;
}

#navigation li {
  display: inline;
  padding: 50px;
}

#navigation a {
  text-decoration: none;
  color: #FFFFFF;
}

body {
  background-color: #969696;
}

side {
  display: block;
  box-sizing: border-box;
  float: right;
  width: 150px;
}

#rose {
  overflow: hidden;
}

.imageContainer {
  float: left;
  margin-right: 250px;
  margin-left: 20px;
}

p {
  text-align: center;
}

.imageContainer2 {
  float: center;
  margin-right: 250px;
  margin-left: 20px;
}

p {
  text-align: center;
}

<!DOCTYPE html >
<html lang="en">

<head>
  <title>St. Pete Flower Market</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="test.css">
</head>

<body>
  <div id="container">
    <header role="banner">
      <span><a href="#search">Search</a></span>
      <h1>St. Pete Flower Market</h1>

    </header>
    <nav>
      <div id="navigation">
        <ul>
          <li><a class="navigation" href="index.html">Home</a></li>
          <li><a class="navigation" href="contact.html">Contact Us</a></li>
          <li><a class="navigation" href="occasions.html">Occasions</a></li>
          <li><a class="navigation" href="flowers.html">Flowers</a></li>
          <li><a class="navigation" href="giftbaskets.html">Gift Baskets</a></li>
          <li><a class="navigation" href="deals.html">Deals</a></li>
          <li><a class="navigation" href="aboutus.html">About Us</a></li>
        </ul>
      </div>
    </nav>

    <section id="side">

    </section>
    <aside role="complementary">
    </aside>

    <main>
      <div id="rose">
        <h1><img src="roses.jpg" width="100%" height="300px">
      </div>
      </h1>
      <div class="image123">
        <div class="imageContainer">
          <img src="sunnydays.jpg" height="300" width="300" />
          <p>This is image 1</p>
        </div>
        <div class="imageContainer">
          <img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
          <p>This is image 2</p>
        </div>

      </div>

      < <div class="image1234">
        <div class="imageContainer2">
          <img src="sunnydays.jpg" height="300" width="300" />
          <p>This is image 1</p>
        </div>
        <div class="imageContainer2">
          <img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
          <p>This is image 2</p>
        </div>







    </main>

    <footer> fjiefjwiofjewfjiewofjewo</footer>

  </div>
</body>

</html>

Solution

There are some errors in your code: the h1 tag inside the div #rose is actually closing outside it. consider getting rid of the h1 tag in the first place, unless you need a title with the top image. A similar error is div class="image1234" closing outside the main tag.

My solutions (which seems to work fine) is to get rid of the css for both the image containers, add an outer div and set its css to display:flex; and justify-content: space-around; that worked for me

<div id="newDiv">
  <div class="image123">
    <div class="imageContainer">
      <img src="sunnydays.jpg" height="300" width="300" />
      <p>This is image 1</p>
    </div>
    <div class="imageContainer">
      <img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
      <p>This is image 2</p>
    </div>

  </div>

    <div class="image1234">
      <div class="imageContainer2">
      <img src="sunnydays.jpg" height="300" width="300" />
      <p>This is image 1</p>
    </div>
    <div class="imageContainer2">
      <img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
      <p>This is image 2</p>
    </div>
  </div>
</div>

the css:

#newDiv {
   display:flex;
   content: space-around;
   }

have a look here for more info: https://www.w3schools.com/css/css3_flexbox.asp