Неполное заполнение экрана

.menu {
        display: flex;
        gap: 2rem;
        align-items: center;

        @media (width < 48rem) {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #000;
            width: 100%;
            height: 100vh;
            flex-direction: column;
            align-items: start;
            justify-content: center;
            padding-left: 20px;

            &__link {
                font-family: 'Josefin Sans', sans-serif;
                font-size: 30px;
                font-weight: 300;
            }
        }

        // .menu__item
        &__item {
            display: flex;
        }

        // .menu__link
        &__link {
            color: #fff;
            padding: .5rem 0;

            &:hover {
                border-bottom: .125rem solid #fff;
            }
        }

        &-icon {
            width: 1.5rem;
            height: 1rem;
            position: relative;
            z-index: 50;
        }
    }