Я пытаюсь сделать отступ в панели навигации по горизонтали.

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.

изображение navbar

Тик слева, панель навигации в середине и 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/