CSS is only as good as the HTML it is applied to... and to be frank even after your rewrite the HTML is junk.
Why? Well for starters multiple H1. Remember, you don't choose tags just because you want fonts in a certain size. Outside of a SECTION your H1 (singular) means THE (singular) HEADING (singular) that everything on every page of a website is a subsection of. Think of it as being like how the title of a book or newspaper is at the top of EVERY fold-pair. Inside a SECTION tag is "can" define the start of that SECTION, but since
Hence all those H1 should be H2... the start of major subsections of the page, the first H2 being the start of the main content unless a MAIN tag is presence. Likewise since headings start sections, those inner DIV would/could/should be SECTION in HTML 5. (though I'm ok with DIV myself, some clients would complain about that)
Also doesn't speak well you're using PX for margin and a fixed height instead of a "proper" dynamic measurement like EM and allowing height/padding to do their job. Makes me think you're not using dynamic fonts and as such your entire layout is a walking talking accessibility violation. Remember, apart from the occasional 1px border or shadow, using PX is an accessibility /FAIL/ particularly in regards to content/layout.
... and of course the use of single quotes indicating bad server-side practices as well.
Be aware too that you can still use normal "border" to set the style and colour, and then use border-width after in the "round the clock" approach.
border:solid red;
border-width:1px 1px 1px 0;
You also failed to include further reduction in your margin declaration. If a property is missing from the end, the opposing one is used. Hence:
padding:0 10px;
is the same as:
padding:0 10px 0 10px;
Just as:
padding:5px 0;
Is the same as:
padding:5px 0 5px 0;
It also doesn't help that you're setting text align on each and every blasted child, when text-align -- at least by default -- INHERITS... so there is no reason for you to be targeting each and every blasted one with
Gets even worse when we realize that you've managed to mis-use flex in the old school "I need a DIV for each and every row" nonsense. It's called flex-wrap, use it... and to that end use nth-child(3n+#) for the alignment, that way you can kill of a slew of "DIV for nothing".
The border could also likely be simplified by simply always setting bottom-right on each inner DIV, and top-right on the outermost .container.
Check this pen out to see what I mean: