I am facing issues with setting the justify property for items inside my flexbox.
Even though I am setting this property in the container class, it does not seem to have any effect. I am unable to understand what is causing this, any help would be appreciated.
For code reference, please check out my jsfiddle: https://fiddle.jshell.net/n7ts68se/4/
(The embedded editor messes with paddings, hence the jsfiddle link)
I have set the justify-content to 'center' in order to make the items stick together, but there still seems to be some space left between them. What could be the issue?
<nav class="main-header">
<a id="logo" class="main-button header-logo"> <h4>test logo here..</h4> </a>
<a id="t1" class="main-button"> <h4> najnowsze standardy.</h4> </a>
<a id="t2" class="main-button"> <h4> profesjonalna wspólpraca.</h4> </a>
<a id="t3" class="main-button" href="kontakt.php"> <h4>kontakt</h4> </a>
</nav>
CSS:
.main-header {
display: flex;
justify-content: center;
margin: 0 0 3em 0;
}
.main-button {
background: rgba(70, 73, 79, 0.6);
margin: 0 auto;
padding: 0 1em;
color: darkblue;
font-size: 110%;
box-shadow: 1px 2px 1px 0px lightgray;
}