CSS Flex Justify-content dont push elements to each corner

Question

Hi I want to push 2 elements to each corner like what float actually do so I give the parent display flex and justify-content, space between but it seems like theres margin left before the first element and margin right after the last element. in this example the header is parent and h1 is the first element and nav is the last element. I want h1 stick to the left and nav stick to the right with display flex.

HTML

        <header>
            <h1>Thermos</h1>
            <nav>
                <a href='#'>Add URL</a>
                <a href='#'>Sign Up</a>
                <a href='#'>Sign In</a>
            </nav>
        </header>
        <main>
            <section id='main'>
                <div id='intro'>
                    <h1>Welcome</h1>
                    <p>Thermos is a simple social bookmarking site. Or actually, you can use it the way you want.</p>
                </div>
                <article>
                    <h2>Article section h2</h2>
                    <p>Qui ne magna delenit splendide, diam ullum regione vis no, an modo numquam eum. Ne ullum clita libris vel. In tantas graeci molestiae eam, ei sed aeterno aperiri fabulas. Quo eu quod dicta, nec sint expetenda eu. Aeque nobis verterem ea cum, sed no hinc salutandi consetetur. Volumus assueverit in qui, commodo nominavi ad pro.</p>
                </article>
                <article>
                    <h2>Article section h2</h2>
                    <p>Qui ne magna delenit splendide, diam ullum regione vis no, an modo numquam eum. Ne ullum clita libris vel. In tantas graeci molestiae eam, ei sed aeterno aperiri fabulas. Quo eu quod dicta, nec sint expetenda eu. Aeque nobis verterem ea cum, sed no hinc salutandi consetetur. Volumus assueverit in qui, commodo nominavi ad pro.</p>
                </article>
            </section>
            <aside>
                <h3>Aside</h3>
                <p>Dico tantas definiebas eum ad, nostrum reprimique duo no. Ut pri causae ponderum, ea per erat facilisis. Ad clita utroque vel, in stet animal meliore per. An audire ponderum disputando usu, eu nam ipsum clita menandri, cu tempor maiestatis persequeris quo.</p>
            </aside>
        </main>

CSS

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,
samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
*,*:before,*:after{box-sizing:inherit}
*:before,*:after{content:''}
html{box-sizing:border-box}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul,ul li{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;color:inherit}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

html, body {
    font-family: Lato;
    font-size: 16px;
}

header {
    background-color: #FB7524;
    color: #fff;
    display: flex;
    justify-content: space-between;
    border-bottom: 20px solid #D74411;
    margin-bottom: 30px;
}

header > * {

    }

header > h1 {
    font-size: 2rem;
    font-weight: 700;
    align-self: center;

}

nav {
    font-size: 0;
}

nav > a {
    font-size: 1.1rem;
    display: inline-block;
    width: 100px;
    padding: 40px 0;
    text-align: center;
    margin-left: 10px;
    background-color: #D74411;
}

nav > a:first-child {
    margin-right: 0;
}

main {
    display: flex;
    justify-content: space-between;
}

section#main {
    width: 60%;
    margin-left: 40px;
}

section#main #intro {
    margin-bottom: 30px;
}

section#main #intro h1 {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 10px;
}

section#main #intro p {
    font-size: 1.1rem;
}

section#main article {
    margin-top: 20px;
}

section#main article h2 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 10px;
}

section#main article p {
    font-size: 1.1rem;
    text-align: justify;
}

aside {
    transition: 0.3s all ease-out, margin 1ms,
                bottom 0.2s;
    width: 30%;
    min-width: 300px;
    max-height: 300px;
    margin: 0 40px 0 20px;
    background-color: #FB7524;
    border-top: 20px solid #D74411;
    padding: 20px;
}

aside h3 {
    font-size: 1.3rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 20px;
}

aside p {
    font-size: 1.1rem;
    color: #fff;
    text-align: justify;
}

@media (max-width: 750px) {
    aside {
        height: 200px;
        width: auto;
        margin: 0;
        position: fixed;
        bottom: -100px;
        opacity: 0.3;
    }

    aside:hover {
        bottom: 0;
        opacity: 1;
    }
}

Here is a JSFiddle.

Answer 1

You're giving your element an empty content :before & :after which is messing with your styles. Is there a particular reason why you're applying them to every element?

Remove the :before & :after and it should work as expected.

CSS

*:before,*:after{content:''} /* Remove this */

JSFiddle

---

Why is this happening?

Because with the :before & :after inside of your flex container, it sees 4 elements instead of the 2 you want the styles to apply to. I created an example of what is happening:

Example: Extra in-flow elements (your issue)

Answer 2

You need to set the header to flex: 1. This should remove the unwanted margin and lets all the flexible items be the same length, regardles of its content:

header > h1 {
    flex: 1;
}