等间距导航栏中的文本和搜索栏

Question

我只是想让我的文本和搜索栏间距均匀，并在导航栏中水平居中。我已经设法将文本居中并将它们隔开，但在水平居中搜索栏时遇到麻烦。任何帮助都太好了!

<nav class="TopNav">
<h1>Locals RUs Pet Store</h1>
<form action="" class="SearchBar">
<input type="text" placeholder="Search here..." name="q" />
<button type="submit">
<img src="/Icons/MagnifierSearchIcon.png" />
</button>
</form>
</nav>


.TopNav{
padding-top: 10px;
padding-bottom: 10px;
display: flex;
justify-content: space-around;
}
.TopNav h1{
padding-left: 200px;
font-family: macho,sans-serif;
font-weight: 900;
font-style: normal;
font-size: 4rem;
}

.SearchBar{
margin: 0 auto;
width: 100%;
max-width: 500px;
height: 40px;
display: flex;
align-items: center;
border-radius: 60px;
padding: 10px 20px;
background: white;
}
.SearchBar input{
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 24px 20px;
font-size: 20px;
color: black,
}

Answer 1

.TopNav {
padding-top: 10px;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
flex: 1 1 10px;
max-width: 80%;
margin: 0 auto;
align-items: center;
}
.TopNav h1{
padding-left: 0px;
font-family: macho,sans-serif;
font-weight: 900;
font-style: normal;
max-width: 40%;
font-size: 2rem;
}

.SearchBar{
margin: 0 auto;
width: 100%;
max-width: 60%;
height: 40px;
display: flex;
align-items: center;
border-radius: 60px;
padding: 10px 20px;
background: white;
max-width: 250px;
}
.SearchBar input{
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 24px 20px;
font-size: 20px;
color: black,
}

<nav class="TopNav">
<h1>Locals RUs Pet Store</h1>
<form action="" class="SearchBar">
<input type="text" placeholder="Search here..." name="q" />
<button type="submit">
<img src="/Icons/MagnifierSearchIcon.png" />
</button>
</form>
</nav>