Как сделать так, чтобы навигационная панель не меняла ширину после фиксированной позиции

Question

У меня есть панель навигации, которая выглядит следующим образом:

, но когда я добавил position: fixed в заголовок, ширина изменилась и стала похожей это:

Вот мой index.html

    <header>
        <div class="logo-container">
            <img src="https://i.ya-webdesign.com/images/rocket-logo-png-4.png" alt="logo" class="logo">
            <h4>Rockode</h4>
        </div>

        <nav>
            <ul class="nav-links">
                <li class="nav-link active"><a href="#">Beranda</a></li>
                <li class="nav-link"><a href="#">Produk</a></li>
                <li class="nav-link"><a href="#">Pengembang</a></li>
                <li class="nav-link"><a href="#">Kontak</a></li>
            </ul>
        </nav>

        <div class="header-right">
            <button class="btn btn-sign-up">Daftar</button>
            <button class="btn btn-sign-in">Masuk</button>
        </div>
    </header>

    <main>
        <div class="content">
            <article>This is article</article>
            <article></article>
        </div>
        <aside></aside>
    </main>

а вот style.css

main {
    background-color: white;
    height: 720px;
    z-index: 1;
    position: relative;
    padding-top: 188px;
  }

header {
    display: flex;
    padding: 30px 10%;
    height: 88px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.075);
    z-index: 2;
    position: fixed;
    background: white;
}

Answer 1

Не уверен на 100%, в чем проблема, но я только добавил это, и оно отлично работает ...

main {
position: relative;
padding-top: 88px
}

header {
position: fixed;
}

См. Скрипту: https://jsfiddle.net/8ktxzfvL/

Answer 2

Это было плохо, потому что я не заметил значение width в секции заголовка.

Это решено объявлением width: 100%.