Линейные элементы блока располагаются друг над другом

Question

Я уже пару часов возился с этим битом кода и не могу понять.

Я пытаюсь создать одну строку навигационных ссылок (всего 9) , если это уместно), с первой ссылкой, прикрепленной к левой стороне экрана, и дополнительными ссылками справа налево за другой (как строка текста).

Все мои ссылки располагаются сверху друг друга в одном месте. Что я делаю не так, что они не появляются в строке?

.logo {
     font-family: 'Work Sans';
     font-weight: 100;
     font-size: 150px;
     color: #B5B5B5;
     position: absolute;
     margin-top: 25px;
     text-align: right;
}
 .logo::before {
     content: '////////////////////////////////////////////';
     font-weight: 300;
     letter-spacing: 4px;
     font-size: 25px;
     color: #ff00ff;
}
.navs a {
    box-sizing: border-box;
    display: inline;
    position: absolute;
    left: 0;
    margin: -10px 15px 0px;
    width: 135px;
    border-bottom:1px solid #333;
    padding:6px;
    font:14px 'share tech mono';
    text-transform:uppercase;
    letter-spacing:1px;
    color:#B5b5b5;
    text-align: left;

}

<div class="logo">
                    STICTION

                    <div class="navs"><a href="/">QUICK-START</a> <a href="/">RULES</a></div></div>

Если этого кода недостаточно для диагностики проблемы, я могу предоставить больше.

Answer 1

Причина проблемы связана с атрибутом 'position: absolute' для .navs элемента.

position: absolute;

заставляет элемент отображаться в точном положении на экране, в результате чего различные элементы одного и того же класса выглядят сложенными друг над другом.

Проблема может быть исправлена ​​с помощью

1. Либо удалив 'position: absolute', либо
2. Изменив свойство на 'position: относительный'

Более подробная информация о свойстве 'position':

https://www.w3schools.com/cssref/pr_class_position.asp