Меню Burger не сфокусировано должным образом

Question

Я создал меню гамбургера в чистом CSS, но проблема в том, что по какой-то причине он центрирован левой, а не средней. Я не понимаю, почему.

Markup:

<section id="header"> 
    <a href="#menu" class="box-shadow-menu" id="navTrigger"> 
     <div class="navicon"> 
     </div> 
    </a> 
</section> 

CSS:

#header { 
    width: 100%; 
    height: 45px; 
    background-color: #4dc1df; 
    position: fixed; 
    z-index: 100; 
} 

.navicon { 
    position: fixed; 
    height: 45px; 
    left: 50%; 
    margin-left: -17.5px; 
} 

.box-shadow-menu { 
    position: relative; 
    display: block; 
    height: 45px; 
} 

.box-shadow-menu:before { 
    content: ""; 
    position: absolute; 
    top: 10px; 
    width: 35px; 
    height: 4px; 
    background: white; 
    box-shadow: 0 10px 0 0 white, 0 20px 0 0 white; 
} 

Demo: http://jsfiddle.net/jLhnr12p/1/.

Любая помощь, чтобы центрировать это должным образом была бы оценена!

Answer 1

Ваш код:

.navicon { 
    position: fixed; 
    left: 50%; 
    right: 50%; 
} 

Вы не можете центрирования, как это, вы можете сделать это, установив свойство левой до 50% и установив отрицательную маржу налево (половина NaviCon которая 17.5px);

.navicon { 
    left: 50%; 
    margin-left: -17.5px; // or transform: translateX(-50%); 
}