Сделать страницу меньше в CSS?

Question

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

Вот скриншот проблемы: https://gyazo.com/d3f9c4f933f5b54c70835451d62d258f

«Riptide» ссылка технически по центру страницы, но я не хочу, чтобы страница быть так велик, как это. Если я минимизирую ширину страницы, ссылка перемещается. Это мой текущий код:

@import url('https://fonts.googleapis.com/css?family=Raleway'); 
body { 
    max-width: 100%; 
} 
.fullscreen-bg { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    z-index: -100; 
} 

.fullscreen-bg__video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

@media (min-aspect-ratio: 16/9) { 
    .fullscreen-bg__video { 
    height: 300%; 
    top: -100%; 
    } 
} 

@media (max-aspect-ratio: 16/9) { 
    .fullscreen-bg__video { 
    width: 300%; 
    left: -100%; 
    } 
} 

@media (max-width: 767px) { 
    .fullscreen-bg { 
    background: url('../img/videoframe.jpg') center center/cover no-repeat; 
    } 

    .fullscreen-bg__video { 
    display: none; 
    } 
} 

#riptide { 
    font-size: 4.5em; 
    text-decoration: none; 
    font-family: "Raleway", sans-serif; 
    font-weight: 900; 
    color: white; 
    position: relative; 
    padding: 15px; 
    top: 40%; 
    margin-left: 50%; 
    margin-right: 50%; 
    border-radius: 10px; 
    transition: color 0.6s, background-color 0.6s; 
} 

#riptide:hover { 
    color: black; 
    background-color: white; 
} 

Answer 1

Теперь, зная, в чем нуждался ОП, следующее решение.

Мы завернули его якорь <div> и расположили его абсолютно в середине страницы. Это было сделано следующим:

#test{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
} 

С раздела Riptide упрощено до:

#riptide { 
    font-size: 4.5em; 
    text-decoration: none; 
    font-family: "Raleway", sans-serif; 
    font-weight: 900; 
    color: white; 
    padding: 15px; 
    text-align: center; 
    border-radius: 10px; 
    transition: color 0.6s, background-color 0.6s; 
    height: 100%; 
    display: block; 
} 

Jsfiddle: https://jsfiddle.net/yrscgvek/10/

Позвольте мне знать, что происходит или дать больше информации. Я сделаю все, что могу, чтобы помочь.

Answer 2

попробовать это

style="overflow-x: hidden"