This is my first challenge. I would really appreciate it if you could give me advices or comments to improve. I did it with two different stylesheets, one for devices with less than width:1100px and another stylesheet for the rest of devices.
Try giving html,body a height of 100%.
Then you could give flex-container a parent which will have
display:flex;justify-content:center;align-items:center;height:100%;
This way, you will position the flex-container on the center of the whole page with no use of margins, or having to guess the size of them. By doing this, you will allow your content to take a full width of the screen at all times.
Since, in this case, your flex-container has a width of ~80%, there is no need to add the width to children elements. They will take up the space that they need. If you give the flex-container a fixed height(~450px, but only for desktop), and the children 100%, you will not have to deal with adjusting the heights of children individually.
With this, on desktop flex-container children will always be the same size, and you won't have to worry of elements popping out of the container or being different size.
On mobile the flex-container will have a width of 100% to take up the whole screen, and the children should follow.
In regards to borders, keep in mind that you can add border-radius for each corner individually. For example: border-top-left & border-bottom-left to left box, and same for the right side.
In regards to content on the left side. You can, again, position it fully with padding, or, since it is a flexbox challenge, add a display:flex to first box, position it vertically and add padding on left and right side.
Take a look at Flexbox Froggy, its a nice game to help you get a better grasp of css flexbox. Also check out PerfectPixel Chrome extension, this will allow you to put a jpg design as an overlay, and create pixel perfect designs Also, if there's anything not clear in what I wrote, please don't hesitate to ask since I am fresh in leaving feedback.
