Stricker

Приветствую, проблема такая. Есть фиксированный menu <header> <div class="game_title"> <span> TEXT TEXT </span> </div> <div class="header_panel"> <div class="panel"> <menu> <li><a href="">TEXT TEXT</a></li> <li><a href="">TEXT/a></li> <li><a href="">TEXT</a></li> <li><a href="">TEXT</a></li> <li><a href="">TEXT</a></li> <li><a href="">TEXT</a></li> </menu> </div> </div> </header>И CSS /* Шапка с названием игры */header > .game_title { height: 30px; background: url(url); background-repeat: no-repeat; background-size: 800px 30px; display:flex;}header > .game_title > span { font-family: "Myriad Pro"; text-shadow: 0px 0px 1px #aaa; font-size: 18px; color: #FFFFFF; margin: auto;}/*Меню в шапке*//* Основной фон */header > .header_panel { height: 30px; background-color: #F7FBE8; width: 800px; display: flex;}header > .header_panel > .panel { background-color: #66B3B0; margin-top: 4px; width: 800px; height: 24px; display: flex;}/* Меню */header > .header_panel > .panel > menu { width: 84%; height: 14px; position: relative; margin: auto 0; display:block;}/* Элементы меню */header > .header_panel > .panel > menu > li:first-of-type { margin-left: 14px;}/* Элементы меню */header > .header_panel > .panel > menu > a:last-of-type {}header > .header_panel > .panel > menu > li { position: relative; margin-left: auto; float: left; margin-left: 9.4%; list-style: none;}header > .header_panel > .panel > menu > li > a { color: #FFFFFF; white-space: nowrap; font-family: "Myriad Pro"; font-size: 0.8em; text-decoration: none;}В общем проблема в том, что на планшете\телефоне, некоторых браузерах последний элемент выходит за границу width: 84%;