Использование значения свойства CSS ширины по размеру содержимого

Демонстрация работы горизонтального меню с использованием значения свойства по размеру содержимого и центрированием, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<div class="basicnav fit centered">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>

CSS

.basicnav {
    background: #555;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}
.fit {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    display: table;
}
.centered {
    margin: 0 auto;
}
.basicnav a {
    text-decoration: none;
    display: inline-block;
    padding: 1rem;
    border-bottom: none;
    text-transform: uppercase;
    color: #fff;
}
a:hover {
    border-bottom: 1px solid #333;
    color: #000;
}