Почему фиксация позиции div разрушает его внешний вид в HTML и CSS

Question

<div class="topnav">
<div class="container">
    <span class="icons">
        <a href="#contact"><i class="fa fa-phone"> </i> Contact</a>
    </span>
    <span class="icons">
        <a href="#showcase"><i class="fa fa-suitcase"> </i> Showcase</a>
    </span>
    <span class="icons">
        <a href="#home"><i class="fa fa-home"> </i> Home</a>
    </span>         
</div>

CSS

.topnav {
    overflow: hidden;
    background-color: #333;
    position: fixed;
}

.topnav a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: right;
    padding: 14px 16px;
    text-decoration: none;
}

Как вы видите здесь, если позиция относительная, она займет всю ширину контейнера, но когда я исправлю ее, правая часть обрезается

Answer 1

position: fixed означает, что элемент расположен относительно окна браузера, а не относительно его родительского элемента div.Пожалуйста используйте это для справки