Hey so I have a fixed header bar with a logo/title and then a nav section. In the nav section I have an unordered list with three different links. No matter what I do though, the three links are stuck together, and won’t space as the justify-content property is set to. I can get them to sit in a row rather than a column using the flex-direction, so I know the flex display is working, but the justify-content property isn’t working. Any help would be appreciated, I’m very new to this!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans JP', sans-serif;
}
header {
background-color: rgb(255,126,38);
position: fixed;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
width: 100%;
height: 15%;
}
#logo {
flex: 0 1 auto;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
color: white;
filter: invert(100%);
}
#logo img {
width: 60px;
height: auto;
}
h1 {
font-family: 'Righteous', cursive;
}
ul {
margin: auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
list-style-type: none;
text-transform: none;
}
a {
text-decoration: none;
color: black;
}
<body>
<header>
<div id="logo">
<img src="https://cdn0.iconfinder.com/data/icons/kitchen-utensil-set/128/Cloche_food_kitchen_restaurant_icon-512.png" alt="cloche icon">
<h1>Brand</h1>
</div>
<nav>
<ul>
<li>
<a href="#link-1">Link 1</a>
</li>
<li>
<a href="#link-2">Link 2</a>
</li>
<li>
<a href="#link-3">Link 3</a>
</li>
</ul>
</nav>
</header>
