I'm designing a website that, for stylistic purposes, is mainly contained in a 1000px wide box in the center of the screen. The navbar near the top of the box is tending towards a middle alignment where they all clump together, when I would like it to align to the left, underneath the header image. This issue mainly seems to occur due to the "justify-content" element in the .flexbox-container div, but this is the same element that I need to center the rest of the elements. The only way I can make the navbar aligned how I want is by forcing the width of the ul element to 1000px, which makes the site unusable for mobile users.
This is how I would like the navbar to align:forced width alignment
This is how it ends up aligning without the forced width:unforced width alignment
Every solution I've tried hasn't made a dent in the issue, the only half-solutions I've found have been removing the justify-content element or forcing the width, and both elements leave me with a still unusable result. I've tried changing to float elements, I've tried many different combinations of padding and margins to see if that fills out the remaining space, to no avail. I'm not particularly good at css, so I do admit my solutions are probably missing an obvious fix, or I set up some other element incorrectly. If someone could point out what I could add or remove, I'd be incredibly grateful, because this is really driving me up the wall.
Here is my code (no forced width element under ul):
body {background-image: url('blue bg.png');font-size:130%; color:white; margin:1%;}ul {list-style-type:none; margin:0; padding:0; background-color:black; max-width:1000px;}* {box-sizing: border-box;}li {display:inline-block; padding:1% 2%; border:1px solid white;}a {color:gainsboro; text-decoration:none;}a:visited {color:silver; text-decoration:none;}a:hover {color:paleturquoise; text-decoration:none;}.flex-container {display:flex; flex-direction:column; max-width:1000px; background-color:black; padding:0.5%;}.everything {display:flex; flex-direction:column; justify-content:center; align-items:center; padding:1%;}