Cameron A Cameron A - 3 months ago 20
CSS Question

CSS Flex Justify-content dont push elements to each corner

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

You're giving your element an empty content :before & :after which is messing with your styles. Is there a particular reason why you're putting 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.

Extra in-flow elements (your issue)