Three div's in one line as header - html

Question

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>

Answer 1

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>

Answer 2

How about something like this?
This also keeps the lines in a 45 degrees slope, no matter how wide the window is.
.header {
display: flex;
overflow: hidden;
}
.logo {
position: relative;
flex: 0 0 24%;
max-width: 24%;
height: 80px;
}
.logo:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: -100%;
right: 0;
bottom: 0;
background-color: green;
transform: skewX(45deg);
}
.photo1 {
position: relative;
flex: 0 0 38%;
max-width: 38%;
width: 100%;
height: 80px;
}
.photo1:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: -2px;
right: -2px;
bottom: 0;
background-color: red;
transform: skewX(45deg);
}
.photo2 {
position: relative;
flex: 0 0 38%;
max-width: 38%;
height: 80px;
}
.photo2:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: -100%;
bottom: 0;
background-color: brown;
transform: skewX(45deg);
}
<div class="header">
<div class="logo"></div>
<div class="photo1"></div>
<div class="photo2"></div>
</div>