Как сделать правильно адаптивное меню?

Question

[WowItIsYou2020]

Сейчас:
Нужно:

<header class="header">
        <div class="header_container container">
            <div class="header_logo flex">
                    <img src="images/dest/header/logo_header.png" alt="">
                    <p>FORKIO</p>
            </div>
           
    
            <div class="flex">
                <div class="header_nav">
                    <div class="nav flex">
                        <div class="nav_item">
                            <a href="#">Overview</a>
                        </div>
                        <div class="nav_item">
                            <a href="#">About Fork</a>
                        </div>
                        <div class="nav_item">
                            <a href="#">Buying Options</a>
                        </div>
                        <div class="nav_item">
                            <a href="#">Support</a>
                        </div>
                    </div>
                </div>
    
                <div class="header_button flex">
                    <p>Buy Now</p>
                </div>
            </div>
        </div>
    </header>

Answer 1

[YavaDev]

Примерно так

Comments

[WowItIsYou2020]

Большое спасибо!

Answer 2

[scottparker]

по мне надо кнопку к лого закинуть, обернуть лого и кнопку в блок, и у него space-around. у container direction - row

Comments

[WowItIsYou2020]

Огромное спасибо!

Answer 3

[Икотий Айтишевич]

В принципе, ответ уже дан, но хочу добавить, что семантически неправильная вёрстка. Блок с меню должен быть в теге <nav>, а сам список в теге <ul> и каждый пункт меню обёрнут в <li>.

И вообще рекомендую почитать про семантику и вылечиться от диватоза.

Comments

[WowItIsYou2020]

Большое спасибо, учту!