レスポンシブなナビゲーション

Question

私はナビゲーションを反応的にしようとしていますが、どうしたらいいのでしょうか？次の行にジャンプしないようにするために、パディングが原因です。幅としてパーセンテージを使用していますが、それは醜いです。

このページは、通常の解像度にどのように見えるかです： http://imgur.com/a/YO7xh

これは私がに拡大すると、それがどのように見える..です（これは私が起こるしたくないものです）： http://imgur.com/a/a3Siu

これが起こらないように私は何ができますか？

ナビゲーションのためのコード：そのようなCSSの

.header-side .game { 
 
    float: right; 
 
} 
 

 
.header-side .selected { 
 
    color: #f7c22c; 
 
} 
 

 
.header-side .other { 
 
    float: left; 
 
} 
 

 
.bottom-header { 
 
    height: 115px; 
 
    border-bottom: 1px solid #343538; 
 
    display: flex; 
 
    color: #787878; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
} 
 

 
header { 
 
    width: 100%; 
 
} 
 

 
.top-header { 
 
    height: 45px; 
 
    border-bottom: 1px solid #343538; 
 
    width: 100%; 
 
} 
 

 
.header-side { 
 
    width: 45%; 
 
    height: 100%; 
 
} 
 

 
.header-middle { 
 
    width: 10%; 
 
    margin: auto; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.header-divider { 
 
    height: 60px; 
 
    text-align: center; 
 
    transform: rotate(45deg); 
 
    width: 60px; 
 
    margin: auto; 
 
    border: 1px solid #f7c22c; 
 
}

<header> 
 
    <div class="top-header"> 
 
    This is the top header! 
 
    </div> 
 
    <div class="bottom-header"> 
 
    <div class="header-side"> 
 
     <div class="nav-item game">skin upgrade</div> 
 
     <div class="nav-item game">skin royale</div> 
 
     <div class="nav-item game selected">skin crash</div> 
 
    </div> 
 
    <div class="header-middle"> 
 
     <div class="header-divider"> 
 
     </div> 
 
    </div> 
 
    <div class="header-side"> 
 
     <div class="nav-item other">deposit</div> 
 
     <div class="nav-item other">withdraw</div> 
 
     <div class="nav-item other">provably fair</div> 
 
    </div> 
 
    </div> 
 
</header>

Answer 1

てみ使用メディアクエリー：

@media screen and (max-width: 768px) { 
    element {padding: 0;} 
} 

ので、解像度は768pxに入るとき、それは削除されます要素のパディング

Answer 2

まあ、使用することができますhttps://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries またはパーセンテージで行くことができます。結局のところ、デスクトップのWebページは420pの画面ではうまく見えませんでした。 私はモバイルデザインのような「低解像度」のものを使うことをお勧めします。そのため、メディアクエリを使用するのがおそらく最善です。

編集：https://www.w3schools.com/css/css_rwd_mediaqueries.asp これはあなたの望みです。