Позицирование элементов

[Sabretooth]

Доброго времени суток! Я новичок (1 Месяц. За ранее хотел бы сказать, что опыта нету, и не судите строго ),

Учусь верстать сделал макет. Так вот не могу сделать нормальную шапку (Горизонтальная расположения меню):

1 Лого и Текст Лого по левому краю.

6 Текстов для Основных меню по центру

2 Доп. Меню по правому краю

float: left & right - пробовал, grid: тоже, flex-box; тоже, даже через inline-block;

Помогите создать меню, не хочу использовать float left/right. Хотел бы использовать grid сетку (Лучше даже написать свою сетку для будущего) Bootstrap вообще не хочу использовать, буду сидеть и писать но его не буду. Но вот беда что в grid есть косяк он решаемый я видел, но возможно ли найти более такой гибкий метод верстки.

 

 

<header class = "roof">
            
                <section class = "container">
                    <!-- Company Logotype - Layout On The Left Of Top Bar -->    
                    <div class = "logotype">
                        
                        <a><img src = "Library/Images/Logo.png"></a>
                        <a><h2>Logo Text</h2></a>
                        
                    </div>
                    <!-- Company Main Menu Bar - Layout On The Center Of Top Bar -->    
                    <nav class = "">
                        
                        <ul class = "">
                            
                            <li><a href = "#">Main Menu</a></li>
                            <li><a href = "#">Main Menu</a></li>
                            <li><a href = "#">Main Menu</a></li>
                            <li><a href = "#">Main Menu</a></li>
                            <li><a href = "#">Main Menu</a></li>
                            <li><a href = "#">Main Menu</a></li>
                            
                        </ul>
                        
                    </nav>
                    <!-- Company Extra Menu Bar - Layout On The Right Of Top Bar -->
                    <nav class = "#">
                        
                        <ul class = "#">
                            
                            <li><a href = "#" >Extra Menu</a></li>
                            <li><a href = "#" >Extra Menu</a></li>
                            
                        </ul>
                        
                    </nav>
                    
                </section>
                    
            </header>

 

 

 

 

 

 

[Xandrito]

на флексах
https://jsfiddle.net/dao5guLo/