Evenly Spacing Text and search bar in a navbar - html

Question

Just trying to evenly space my text and search bar and also center them horizontally in my navbar. I've manage to center the text and space them out but having trouble centering the search bar horizontally.
Any help would be great!
<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>