I am trying to wrap my head around flex-box. I'm trying to position two headers exactly apart but leave some room in the middle of both. Currently have the container .header-containerjustify-content to space evenly but it doesn't appear to separate 'Header1' and 'Header2' titles apart in the center by much.
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');* { box-sizing: border-box; margin: 0; padding: 0; background-color: #24252A;}/*Layout*/header { margin: 30px 20px 100px 20px}.list-items { display: flex; flex-basis: 50%; justify-content: flex-start; gap: 100px;}.start-home { flex-basis: 70%;}.header-container { display: flex; margin-top: 50px; justify-content: space-evenly;}/*Styles*/li,h1,h2,a { font-family: "Roboto", sans-serif; font-weight: 500; font-size: 25px; color: aliceblue; text-decoration: none;}img { height: 65px; cursor: pointer; margin-right: auto;}.nav-links { list-style: none;}<header><nav><ul class="list-items"><li class="nav-links start-home"><a href="#">Home</a></li><li class="nav-links"><a href="#">Test1</a></li><li class="nav-links"><a href="#">Test2</a></li><li class="nav-links"><a href="#">Test3</a></li></ul></nav></header><div class="header-container"><h1 class="h-list">Header1</h1><h2 class="h-list">Header2</h2></div>I tried to use justify-content: space-evenly then setting margin-left and margin-right on the h1h2 items but it just pushes them closer together.