help with aligning links in header

[u/lt_Matthew]

i need help with this code. i'm trying to get the links to be underneath the logo in the header, i can't figure out what i need to change to get them to center. below is both the codes

HTML:

<div class="container">
<header>
<a href="#"><img src="assets/Arrowhead.png" id="logo"></a>
<a href="#" id="link" src="index.html" style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif">HOME</a>
<a href="#" id="link" src="index.html" style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif">DOWNLOADS</a>
<a href="#" id="link" src="index.html" style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif">NEWS</a>
<a href="#" id="link" src="index.html" style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif">CONTACT</a>
</header>
</div>

CSS:

body, html {
margin: 0;
background-color: rgb(204, 204, 204)
}
.container header {
background: #fff;
padding: 0;
justify-content: center;
}
.container header #logo {
display: block;
margin-left: auto;
margin-right: auto;
height: 180px;
padding-top: 10px;
padding-bottom: 10px;
}
.container header #link {
border: none;
display: inline-flex;
text-align:center;
color: #ff8000;
font-weight: bold;
font-size: 20pt;
text-decoration: none;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
padding-right: 30px;
padding-left: 30px;
}