Witam,
Chciałbym się dowiedzieć w jaki sposób mogę pozycjonować elementy wewnątrz div ustawionych na gridzie.

<div class="container">  
<header>
        <h1>My Website</h1>
        <nav class="main-navigation">
            <ul class="link-nav-ul">
                <li>
                    <a href="#">Home</a>
                    <a href="#">About</a>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </nav>
    </header>
</div>

Div o klasie " container" jest ustawiony jako" grid" , header znajduje się na samej górze siatki i rozciąga się na całą długość.Wewnątrz header mam dwa elementy blokowe, które chciałbym ustawić kolejno h1 na 30% header i nav na 70% , elementy listy dodatkowo mają być wyśrodkowane pionowo i poziomo- tutaj niestety nie udaje mi się tego wykonać przy pomocy float , za kazdym razem kontener header powiększa się gdyż element nav wskakuje poniżej h1.
Zamieniając element h1 na display: inline-block , elementy nachodzą na siebie , float nie działa....
Pytanie jakie mam to czy mogę ustawić konteren header jako grid i ustawić dowolna liczbę kolumn i rzędów i pozycjonować elementy względem tej siatki i jak to ewentualnie wykonać bo z moich dotychczasowym prób żadna nie przynosi zadowalającego efektu.
Czy mogę zastosować flex wewnątrz header tak aby układ , który sobie przyjąłem był wykonany prawidłowo.
Bardzo dziękuje za wszelką pomoc.
Pozdrawiam was wszystkich