Three div's in one line as header

I have little problem with my header. I want to create something like this:

I made this, but I couldn't get the third div to appear on the same line as the others. How can I do that?

I've tried Float: left and tried, display

.logo {
  float:left;
  height: 80px;
  width:100%;
  background-color: green;
  -webkit-clip-path: polygon(0 0, 18% 0, 20% 100%, 0 100%);
clip-path: polygon(0 0, 18% 0, 23% 100%, 0 100%);
}

.photo1 {
  background-color: red;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 80px;
-webkit-clip-path: polygon(18% 0, 61% 0, 66% 100%, 23% 100%);
clip-path: polygon(18% 0, 61% 0, 66% 100%, 23% 100%);
}

.photo2 {
  background-color:brown;
  background-size: cover;
  background-position: left center;
  height: 80px;
-webkit-clip-path: polygon(62% 0, 100% 0, 100% 100%, 67% 100%);
clip-path: polygon(62% 0, 100% 0, 100% 100%, 67% 100%);
}

<div class="header">
  <div class="logo"></div>
  <div class="photo1"></div>
  <div class="photo2"></div>
</div>

Solution

Set 3 DIVs:

position: absolute;
width: 100%;

Also adjust the polygon size of .photo2

.logo {
  position: absolute;
  height: 80px;
  width:100%;
  background-color: green;
  -webkit-clip-path: polygon(0 0, 18% 0, 20% 100%, 0 100%);
clip-path: polygon(0 0, 18% 0, 23% 100%, 0 100%);
}

.photo1 {
  position: absolute;
  background-color: red;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 80px;
-webkit-clip-path: polygon(18% 0, 61% 0, 66% 100%, 23% 100%);
clip-path: polygon(18% 0, 61% 0, 66% 100%, 23% 100%);
}

.photo2 {
  position: absolute;
  background-color:brown;
  background-size: cover;
  background-position: left center;
  height: 80px;
  width: 100%;
-webkit-clip-path: polygon(61% 0, 100% 0, 100% 100%, 66% 100%);
clip-path: polygon(61% 0, 100% 0, 100% 100%, 66% 100%);
}

<div class="header">
  <div class="logo"></div>
  <div class="photo1"></div>
  <div class="photo2"></div>
</div>