Flex items are not aligned side by side (i.e. spaced out)? - html

Question

Okay using flex to align the image (purple) and the content (yellow) side by side. However I am getting extra space between and is throwing off the image to the right.
See here: http://imgur.com/a/nl0ZJ
It's supposed to be:
image should be inside the blue div next to the yellow div
the yellow div should be 60% width (These are flex items)
I've checked padding and margin, however it hasn't worked for me. Any ideas?
Here is the html
<div class="sec-1">
<h2>Introducing 'Keeva' world's smartest assistant.</h2>
<div class="flex-box">
<div>
<p class="sales-copy">Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</p>
<!-- Download Buttons -->
<img class="download-btns" src="img/playstore-1.png">
<img class="download-btns" src="img/iphone-1.png">
</div>
<!-- Phone 0 image -->
<img class="phone-img" src="img/iphone-cut.png" alt="phone image">
</div>
</div>
CSS
#media screen and (min-width: 599px) {
.sec-1 h2 {
font-size: 1.2em;
background-color: green;
}
.sec-1 p {
font-size: 1.1em;
width: 50%;
background-color: yellow;
}
.sec-1 .phone-img {
position: relative;
top: 10%;
left: 30%;
background-color: purple;
}
.download-btns {
position: relative;
right: 25%;
background-color: orange;
}
.sec-1 .sales-copy {
width: 50%;
}
.flex-box {
display: flex;
justify-content: flex-end;
}
}

Answer 1

Since display: flex makes its immediate descendants flex items, it is only the div that wraps the the p/img that becomes one.
So to make this work, and since img doesn't behave normal when being flex items, move that div wrapper to the img and it will flow as intended.
I also changed width: 50% to flex-basis: 60% so the yellow element becomes 60%, and added flex-grow: 1 to the div wrapper, so it takes the remaining space.
Updated based on a comment
Changed to an outer and an inner Flexbox wrapper, so the buttons are located below the yellow element and the image to the right
.sec-1 h2 {
font-size: 1.2em;
background-color: green;
}
.sec-1 p {
margin: 0;
font-size: 1.1em;
background-color: yellow;
}
.sec-1 .phone-img {
position: relative;
top: 10%;
left: 30%;
background-color: purple;
}
.flex-box-outer {
display: flex;
}
.flex-box-outer > div {
flex-grow: 1;
}
.flex-box-inner {
flex-basis: 60%;
display: flex;
flex-direction: column;
align-items: center;
}
<div class="sec-1">
<h2>Introducing 'Keeva' world's smartest assistant.</h2>
<div class="flex-box-outer">
<div class="flex-box-inner">
<p class="sales-copy">Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</p>
<!-- Download Buttons -->
<div>
<img class="download-btns" src="http://placehold.it/100x50/?text=playstore">
<img class="download-btns" src="http://placehold.it/100x50/?text=iphone">
</div>
</div>
<!-- Phone 0 image -->
<div>
<img class="phone-img" src="http://placehold.it/100x50/?text=iphone cut" alt="phone image">
</div>
</div>
</div>