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>