レスポンシブデザインにするとうまく表示されないのをどうにかしたいです

レスポンシブデザインにすると背景色が青色っぽい所に収まっている文字がはみ出るのですがどうすれば背景色に収まるのでしょうか？
色々試したのですが解決できません。
レスポンシブデザインの画像ですが文字を強調するためにわざと金色にしています。

<html lang="ja">
  <head>
    <!--メディアクエリ-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--reset.css-->
    <link rel="stylesheet" href="reset.css">
    <!--css-->
    <link rel="stylesheet" href="css/stylesheet.css">
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    <!--fontawesome-->
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <!--jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="no2.js"></script> 
    <!--webフォント-->
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&amp;subset=japanese" rel="stylesheet">
    <title>Airbnbの模写</title>
  </head>
  <body>
    <header>
      <div class="header-btn">
        <div class="search">
          <i class="fas fa-search"></i>
          <p>探す</p>
        </div><!--/.search-->
      </div><!--/.header-btn-->
      <div class="nav">
        <ul>
          <li>ホストをはじめる</li>
          <li>ヘルプ</li>
          <li>登録する</li>
          <li>ログイン</li>
        </ul>
      </div><!--/.nav-->
    </header>
    <div class="top-content" id="top">
      <p class="fixed-bar">
          <i class="far fa-comment-dots fa-2x"></i>
          <span>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。
              アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。
          </span>
        
      </p><!--/.fixed-bar-->
      <div class="container">
        <h1>旅を贈ろう。</h1>
        <p>Airbnbギフトカードで、世界をぐんと身近に</p>
        <a href="#">ギフトカードを登録</a>
      </div><!--/.container-->
      
        
    
    </div><!--/.top-content-->
    <footer>
      <div class="container">
        <div class="top-contents">
          <div class="airbnb">
              <p>Airbnb</p>
              <ul>
                <li><a href="#">採用情報</a></li>
                <li><a href="#">ニュース</a></li>
                <li><a href="#">ポリシー</a></li>
                <li><a href="#">ヘルプ</a></li>
                <li><a href="#">ダイバーシティ&ビロンギング</a></li>
                <li><a href="#">アクセシビリティ対応<span>新着</span></a></li>
                <li><a href="#">企業情報</a></li>
              </ul>
            </div><!--/.airbnb-->
          <div class="recommend">
            <p>スタッフのおすすめ</p>
            <ul>
              <li><a href="#">信頼&安全</a></li>
              <li><a href="#">お友達紹介クーポン</a></li>
              <li><a href="#">Airbnb Citizen</a></li>
              <li><a href="#">出張</a></li>
              <li><a href="#">アクティビティ<span>新着</span></a></li>
              <li><a href="#">Airbnbmag</a></li>
            </ul>
          </div><!--/.recommend-->
          <div class="hosting">
            <p>ホスティング</p>
            <ul>
              <li><a href="#">ホストになる理由</a></li>
              <li><a href="#">おもてなしの心</a></li>
              <li><a href="#">ホストの責任</a></li>
              <li><a href="#">コミニュニティセンター</a></li>
              <li><a href="#">体験を掲載<span>新着</span></a></li>
              <li><a href="#">オープンホーム</a></li>
            </ul>
          </div><!--/.hosting-->
          <div class="sns">
            <div class="logo">
              <a href="#"><i class="fab fa-facebook-f"></i></a>
              <a href="#"><i class="fab fa-twitter"></i></a>   
              <a href="#"><i class="fab fa-instagram"></i></a>  
            </div><!--/.logo-->
            <ul>
              <li><a href="#">利用規約</a></li>
              <li><a href="#">プライバシー</a></li>
              <li><a href="#">サイトマップ</a></li>
            </ul>
          </div><!--/.sns-->
        </div><!--/.top-contents-->
        <div class="bottom-contents">
          <div class="footer-left">
            <a href="#">Airbnb Grobal Services Limited</a> 
            <a href="#">観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a>
            <a href="#">© 2019 Airbnb, Inc. All rights reserved.</a>
          </div><!--/.footer-left-->
          <div class="footer-right">
            <div class="btn">日本語</div><!--/.btn-->
            <div class="btn">JPY-¥</div><!--/.btn-->
          </div>
        </div><!--/.bottom-contents-->
    </div><!--/.container-->
    </footer>
  </body>
</html>



/*共通部分*/
a{
  text-decoration:none;
}
li{
  list-style:none;
}
body {
  margin: 0px;
}

/*ヘッダー*/
header{
  height:60px;
  padding:25px 20px 0  80px;
  display:flex;
  justify-content:space-between;
}
.search{
  width:458px;
  height:46px;
  border:1px solid #EBEBEB;
  box-shadow:0 2px 4px #EBEBEB;
}
.search .fas{
  padding:15px 0 15px 20px;
}
.search p{
  display:inline;
  color:#767676;
}
.nav ul{
  display:flex;
}
.nav li{
  margin-left:20px;
  color:#484848;
  font-size:14px;
  font-weight:bold;
}

/*固定されたバーがある所*/
#top {
  background-image:url(img1.jpg);
  background-size:cover;
  min-height:100vh;
  
}
.fixed-bar{
  position:fixed;
  z-index:16;
  margin-top:0;
  width:100%;
  font-size:14px;
  height:50px;
  line-height:50px;
  background-color:#C2E4E6;
  color:#484848;
  text-align:center;
  
}

.fixed-bar .far{
  display:inline-block;
  margin-right:10px;
  vertical-align:middle;
}
.fixed-bar span{
  vertical-align:top;

}
.top-content h1{
  padding-top:220px;
  font-size:46px;
  font-weight:bold;
  color:#fff;
}
.top-content>.container>p{
  font-size:18px;
  color:#fff;
}
.top-content>.container>a{
  font-size:16px;
  color:#484848;
  background-color:#fff;
  padding:10px 20px;
  display:inline-block;
  border-radius:5px;
}

/*フッター*/
.container{
  max-width:1032px;
  margin:0 auto;
}
.top-contents{
  display:flex;
  border-bottom:1px solid #EBEBEB;
}
.top-contents ul{
  padding-left:0;
  font-size:14px;
}
.top-contents>.sns{
  padding-top:10px;
}
.airbnb{
  margin-right:80px;
}
.recommend,.hosting{
  margin-right:120px;
}

.airbnb>p,.recommend>p,.hosting>p{
  font-weight:bold;
}
.airbnb ul>p{
  display:inline-block;
}
.airbnb>ul>li>a,.recommend>ul>li>a,.hosting>ul>li>a{
  color:#767676;
  display:block;
}
.airbnb span,.recommend span,.hosting span{
  display:inline-block;
  padding:0 2px;
  border-radius:6px;
  background-color:#2A6A70;
  font-size:12px;
  color:#fff;
  margin-left:10px;
}
.sns a{
  color:#767676;
  margin-right:20px;
}
.sns li{
  color:#767676;
}
.bottom-contents{
  display:flex;
  justify-content:space-between;
  padding:20px 0 40px 0;
}
.footer-left{
  font-size:14px;
}
.footer-left a{
  display:block;
  color:#767676;
}
.footer-right{
  color:#767676;
  font-size:14px;
}
.footer-right .btn{
  display:inline-block;
  padding:7px;
  border:1px solid #F2F2F2;
  margin-top:10px;
  margin-left:10px;
}
.footer-right .btn:hover{
  background-color:#767676;
}


/*メディアクエリ*/
@media(max-width:559px){
  /*ヘッダー*/
  header{
    padding-left:10px;
  }
  header>.nav{
    display:none;
  }
  .fixed-bar{
    height:100px;
    
  }
   .fixed-bar span{
     color:gold;
   }
  
  /*フッター*/
  
  .airbnb{
    width:1000px;

  }
}

m.ts10806

2019/10/19 02:29

コードブロックはファイル毎に設置いただいた方がこちらとしては確認しやすいのでわけてください。またゴールを明示してください。どうなれば解決なのか、具体的に、文が難しければ図示でも良いです

m.ts10806

2019/10/19 02:30

あとタグは「レスポンシブWebデザイン」だけだとフォローしている人が限られるので、CSS関係、HTML関係はつけておいたほうがより多くの目に留まりやすくなると思います

行動規範の内容に同意します

回答2件

ベストアンサー

青色エリアに高さを指定しているからだと思います。
heightとline-heightの指定をなくして、上下のpaddingを設定することではどうでしょうか？

css
1.fixed-bar{
2  position:fixed;
3  z-index:16;
4  margin-top:0;
5  width:100%;
6  font-size:14px;
7  padding: 20px 0; 
8  background-color:#C2E4E6;
9  color:#484848;
10  text-align:center;
11}