我正试图横向缩进导航栏的登录按钮

Question

这是Html代码。我试着把导航移到h1旁边，但它在水平上没有很好地对齐

<header>
<div class="container"> 
<div class="header-top">
<h1><a href=""></a> tik</h1>
<section>
<a class="hvr-sweep-to-bottom" href="">Sign In</a>
<a class="hvr-sweep-to-bottom" href="">Register</a>
</section>
</div>
<nav>
<a class="hvr-bob" href="">Home</a>
<a class="hvr-bob" href="">Problems</a>
<a class="hvr-bob" href="">Discussion</a>
<a class="hvr-bob" href="">About</a>
</nav>
</div>
</header>

CSS:

body {
font-family: Raleway, sans-serif;
}
header{
background-image: radial-gradient(circle, #cbb695, #b4a78c, #9f9984, 
#8b897c, #7a7a74);
padding: 1.5em 1em;
}
header h1 {
margin-top: 0;
font-size: 2em;
font-weight: bold;
}
.container{
max-width: 1200px;
margin: 0 auto;
}
.header-top{
display: flex;
justify-content: space-between;
font-weight: bold;
color: white;
}
header a{
color: white;
padding-left: 5px ; 
padding-right: 5px;
}
nav {
display: flex;
justify-content: center;
}
nav > a {
padding-left: 20px;
padding-right: 20px;
text-transform: uppercase;
color: rgba(255, 255, 255, 1)
}
a {
text-decoration: none;
}

这就是我努力实现的目标。我是css和flexbox的新手。

导航条图像

左边的Tik，中间的导航栏和sign_in，在右边注册。如果你不明白我想做什么，请问我。我会尽量解释得更好。

Answer 1

更改一些HTML&CSS

<header>
<div class="container"> 
<div class="header-top">
<h1><a href=""></a> tik</h1>

<nav>
<a class="hvr-bob" href="">Home</a>
<a class="hvr-bob" href="">Problems</a>
<a class="hvr-bob" href="">Discussion</a>
<a class="hvr-bob" href="">About</a>
</nav>
<section>
<a class="hvr-sweep-to-bottom" href="">Sign In</a>
<a class="hvr-sweep-to-bottom" href="">Register</a>
</section>
</div>
</div>
</header>
body {
font-family: Raleway, sans-serif;
}
header{
background-image: radial-gradient(circle, #cbb695, #b4a78c, #9f9984, 
#8b897c, #7a7a74);
padding: 1.5em 1em;
}
header h1 {
margin: 0;
font-size: 2em;
font-weight: bold;
}
.container{
max-width: 1200px;
margin: 0 auto;
}
.header-top{
display: flex;
justify-content: space-between;
font-weight: bold;
align-items:center;
color: white;
}
header a{
color: white;
padding-left: 5px ; 
padding-right: 5px;
}

https://jsfiddle.net/25gm6xne/1/