CSSでページを小さくするには？

Question

自分でイントロサイトを開発していますが、エラーが発生しました。私はビデオの背景を使用して、私はリンクを維持し、私の問題を解決することを願っています。 https://gyazo.com/d3f9c4f933f5b54c70835451d62d258f

「激浪」リンクは、技術的にページの中央に配置されますが、私は、ページが同じ幅そのままであることしたくない：ここでは

は、問題のスクリーンショットです。ページ幅を最小にすると、リンクが移動します。これは私の現在のコードです：

@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

ここで、OPが必要としていたことが分かっているのは解決策です。

私たちは彼のアンカーを<div>で包み込み、ページの真ん中に配置しました。それは次のように行った：

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

に単純化激浪のセクションで：

#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"