Distribute 3 Image Divs Evenly Across Full Width Page

The site is 3peak.us and I am currently trying to display the 3 image flip divs evenly across the page. I would also like it to be responsive.

Ive tried putting them all in one div that is 100% width and then making each one 30% but it does not seem to work. When I would make them 30% they were becoming 30% of the actual image div and not the whole page.

This is the coding for one of the divs. (The other 2 are the same but just have different names to them)

.threeflips {
  width: 100%;
}

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  width: 30%;
float: left;
}

.flip-container:hover .flipper,
  .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 450px;
height: 450px;
}

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;

-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
-o-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

.front {
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/1front.jpg) 0 0 no-repeat;
background-size: 100% 100%;
z-index: 2;
}

.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
transform: rotateY(180deg);

background: url(https://www.3peaks.us/wp-content/uploads/2015/09/1back.jpg) 0 0 no-repeat;
background-size: 100% 100%;
}

and here is the html for it

<div class="threeflips">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
    </div>
    <div class="back">
    </div>
  </div>
</div>

<div class="bflip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="bflipper">
    <div class="bfront">
    </div>
    <div class="bback">
    </div>
  </div>
</div>

<div class="cflip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="cflipper">
    <div class="cfront">
    </div>
    <div class="cback">
    </div>
  </div>
</div>
</div>