Aligning the items not working as expected

Question

I need a small help. I've some of the images designed as below. You can see my code here

codepen.io/anon/pen/WoEXZN

But I'm not getting the output as expected.

Reference Design

Answer 1

You can use CSS Flexbox. And include the flex aligning properties to the parent element.

Just like:

.wedding-img {
  display: flex; /* Flex Container */
  flex-wrap: wrap; /* Wrapping Hexagons to next line after a certain width limit is reached */
  justify-content: center; /* Center aligning hexagons horizontally */
  align-items: center; /* Center aligning hexagons vertically */
}

Have a look at the snippet below (use full screen to view it properly):

.wedding-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 103px;
}

.hexagon {
  overflow: hidden;
  visibility: hidden;
  width: 260px;
  height: 314px;
  margin: -60px 0 0 0px;
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
  cursor: pointer;
  display: inline-block;
  margin: 1em;
  margin-top: -103px;
}
.hexagon-in1 {
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.hexagon-in2 {
  width: 100%;
  height: 100%;
  padding: 0px 12px;
  text-align: center;
  background-repeat: no-repeat;
  background: #f1f4f5;
  visibility: visible;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  display: table;
}

body {
  margin: 0;
}

<div class="wedding-img">
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
</div>

Hope this helps!