HTML、CSS - ビューWebページの変更に関する問題

-1

インラインコンテンツを定義するためにflexを使用しましたが、メディアクエリプロパティを使用すると、スマートフォンビューに渡すとヘッダ/メニューバーがセクションの後ろに表示されます（#media ）。HTML、CSS - ビューWebページの変更に関する問題

どのように問題を解決できますか？私はディスプレイのプロパティを変更しようとしましたが、問題は解決されず、他のプロパティは残っていますが、2つ目はメニューバーを隠すことになっています。

HTMLコード

<!DOCTYPE html> 
<html> 
<head> 
    <title>Emblem</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="https://fonts.googleapis.com/css?family=Bellefair|Lato|Source+Sans+Pro|Zilla+Slab" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="../common_css/common_style.css"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 

    <header> 
     <section id="top-header"> 
      <section id="logo"> 
       <figure> 
        <img src="../common_img/logo.png" alt="Emblem Rare, Collectible Books"> 
       </figure> 
       <h1>Emblem</h1> 
      </section> 
      <h1 class="title">HOME</h1> 
      <section id="accessibility"> 
       <ul id="link"> 
        <li><a href="#">Contact&nbsp;Us</a></li> 
        <li><a href="#">Accessibility</a></li> 
        <li><a href="#">Login</a></li> 
       </ul> 
      </section> 
     </section> 

     <nav> 
      <ul id="nav-bar"> 
       <li class="active"><a href="#" >Home</a></li> 
       <li><a href="#">Books</a> 
        <ul class="dropdown"> 
         <li><a href="#">18Th Century Books</a></li> 
         <li><a href="#">19Th Century Books</a></li> 
         <li><a href="#">20Th Century Books</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">Book as an Investment</a></li> 
      </ul> 
     </nav> 

    </header> 

    <section id="media"> 
<video controls > 
       <source src="video/emblem_video_480x360.ogg" type="video/ogg"> 
       <source src="video/emblem_video_480x360.ogg" type="video/ogg"> 
       Sorry, It seem that your browser does not support HTML5 video tag. Please try with Chrome 5 or above. 
      </video> 

      <section id="media-images"> 
       <figure> 
        <img src="img/rumpour_at_nightfall.jpeg" alt="Rumpour At Nightfall"> 
        <img src="img/ulysses.jpeg" alt="Ulysses"> 
        <figcaption>At the left Rumpour At Nightfall and at the right Ulysses</figcaption> 
       </figure> 
      </section> 


    <p>PRova</p> 
    </section> 


</body> 
</html>

CSSコード

/*reset to default all the browser settings*/ 
*{ 
    margin: 0; 
    padding: 0; 
    font-family: inherit; 
} 


@font-face { 
    font-family: "DefaultFont"; 
    src: url("../fonts/parisr.ttf"); 
} 


li{ 
    list-style: none; 
} 

a{ 
    text-decoration: none; 
} 




#top-header{ 
    display: flex; 
    width: 100%; 
    height: auto; 
    padding-top: 2rem; 
    padding-bottom: 2rem; 
    justify-content: space-between; 
    align-items: center; 
} 
    /*Logo*/ 
    #logo{ 
     margin-left: 2rem; 
    } 
     #logo img{ 
      width: 100%; 
      height: auto; 
     } 

     #logo h1{ 
      text-align: center; 
      font-family: DefaultFont; 
      font-size: 2rem; 
      font-weight: 800; 
      color: #236841; 
     } 
    .title{ 
     padding: 0 2rem; 
     font-family: 'Lato', sans-serif; 
     font-size: 2rem; 
     color: #236841; 
     border-left: 3px solid #236841; 
     border-right: 3px solid #236841; 
    } 
    #accessibility{ 
     margin-right: 2rem; 
    } 

     #link{ 
      display: flex; 
     } 

     #accessibility ul li{ 
      min-width: 4rem; 
      padding-left: 7%; 
     } 

     #accessibility ul li a{ 
      font-family: 'Zilla Slab', serif; 
      font-weight: 600; 
      color: #236841; 
      font-size: 1.2rem; 
     } 

     #accessibility ul li a:hover{ 
      color: #40bf77; 
     } 



#nav-bar{ 
    height: 4rem; 
    display: flex; 
    align-items: center; 
    justify-content: space-around; 
} 
    #nav-bar li{ 
     width: 20%; 
     text-align: center; 
     background-color: #236841; 
     line-height: 4rem; 
     border-left: 1px solid white; 
    } 

    #nav-bar li:first-child{ 
     border-left: none; 
    } 
    #nav-bar li:hover{ 
     background-color: #239B56; 
    } 

    #nav-bar a{ 
     min-width: 8rem; 
     text-align: center; 
     font-family: 'Bellefair', serif; 
     text-transform: uppercase; 
     font-weight: 600; 
     font-size: 1rem; 
     color: white; 
    } 

    #nav-bar li .dropdown{ 
     display: none; 
    } 


    #nav-bar li:hover .dropdown{ 
     position: absolute; 
     display: flex; 
     margin-left: -15%; 
     width: 50%; 
     justify-content: center; 

    } 




@media screen and (max-width: 1002px) { 

    #top-header{ 
     display: flex; 
     justify-content: space-between; 
     align-items: center; 
    } 
    #logo{ 
      margin: 0; 
      width: 180px; 
      height: auto; 
    } 
    .title{ 
     text-align: center; 
     margin-bottom: 1rem; 
    } 

    #nav-bar li { 
     width: 100%; 
     border-left: none; 
     border-bottom: 1px solid white; 
    } 

    #nav-bar { 
     display: block; 
    } 
    #nav-bar li:hover .dropdown{ 
     margin-left: 0%; 
     width: 100%; 
    } 
} 

@media screen and (max-width: 650px) { 
    header{ 
     margin-bottom: 1rem; 
     height: 30%; 
    } 
    #top-header{ 
     display: block; 
    } 
    #logo{ 
     width: 100%; 
     text-align: center; 
     margin-bottom: 1rem; 
    } 
    #logo figure img { 
     width: 150px; 
    } 
    #link{ 
     justify-content: space-around; 
    } 

    .title{ 
     text-align: center; 
     padding: 2 0rem; 
     color: #236841; 
     border-top: 3px solid #236841; 
     border-bottom: 3px solid #236841; 
     border-left: 0; 
     border-right: 0; 
    } 
}

なぜ私はこの問題を持っていますか？私はいつもフレックスを使い、いつもうまく働いた。理由を知っている人なら、それを説明してください。

出典

2017-08-02 Singh Prajit