常連

注目の的

社会貢献

自己紹介

レスポンシブ対応について学習中で、実際にページを作成しています。

クロームの検証機能を確認しながら下記の数字までの幅の場合に適応される
コードを書いたつもりですが、実際に画面縮小してみると
レスポンシブ対応になっていません。
クローム検証時には(show media queriesでのレスポンシブ表示やデバイスのフレームでの表示)
それぞれの画面に収まっているように見えました。
コードの指定方法が間違っているのかと思い、再度調べてみましたが
行き詰まってしまったので、指定方法など間違っているところを教えて頂けないでしょうか。

---
指定したブレイクポイント
タブレット　     max-width:1024
iphone6/7/8  max-width:670
iphone5/se   max-width:570

------

```ここに言語を入力
html
<!DOCTYPE html>

<html lang="ja">
<head>
<meta  charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hide.poto</title>

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

</head>

<body>
    <header class="header">
        <div class="header-left">
            <h2>Yamada TarouPortforio</h2>
            <ul class="socialbtn">
              <li><a href="https://twitter.com/"><img src="http://placehold.jp/80x80.png"</a></li>
              <li><a href="https://twitter.com/"><img src="http://placehold.jp/80x80.png"</a></li>
              <li><a href="https://twitter.com/"><img src="http://placehold.jp/80x80.png"</a></li>


           </ul>
        </div>

        <div class="header-right">
                <nav class="list">
                  <ul class="site.map">
                    <li><a href="#">About</a></li>
                    <li><a href="#jump">Works</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                  </ul>
                </nav>
        </div>
    </header>

    <main class="hide1">
        <div class="gazou1">
        <img class="gazou2" src="http://placehold.jp/800x500.png"alt="101841312e1547bb">
        </div>


        <section class="flex-contianer1">
        　<div class="centeralignment">
           <div class="apps">
             <h1>「aaaaaaa」作成</h1>
          　　　<p><span class="icon_man"></span><font size="3">山田太郎></font></p>
            　 <p><font size="3"><span class="icon-p">iosエンジニア志望</span></font></p>
           </div>
             <div class="gaiyou">
               <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
           </div>
        </div>
       
    



       <div class="centeralignment">
           <div class="gaiyou1">
             <h2 id="jump">サービス概要</h2>
              <img class="gazou2" src="https://placehold.jp/800x400.png">
              
　　　　　　　　<h2>Flow</h2>
             <img class="gazou2" src="https://placehold.jp/800x400.png">
           </div>
       </div>
     </section>

    

     <section class="flex-contianer2">
        <div class="centeralignment">
           <div class="jittsou">
             <h2>実装機能</h2>
              <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  
          </div>
       </div>


       <div class="centeralignment">  
           <div class="technology">
              <h1> 使用技術 </h1>
              <h2> mBaaS　</h2>
              <h3> 【Firebase】　</h3>
              <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
           </div>
        </div>
           

          <div class="centeralignment">  
             <div class="technology">
             <h3> Code管理 </h3>
             <h3> 【Github】</h3>
             <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
           </div>
          </div>

          <div class="centeralignment">  
             <div class="technology">
               <h3> GUI</h3>
               <h3> 【SourceTree】　</h3>
               <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
               <h3> License管理　</h3>
             </div>
          </div>

          <div class="centeralignment">  
             <div class="technology">
               <h3> 【LicensePlist】</h3>
               <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
               </div>
          </div>

          <div class="centeralignment">  
              <div class="technology">
               <h3>UX/UI</h3>
               <h3> XLPagerTabStrip</h3>
               <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
             </div>
          </div>


            
           

    

      <div class="centeralignment">
          <div class="learning">
             <h2>学習履歴</h2>

             <p>○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○○</p>
             <p>○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○○</p>
             <p>○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○○</p>
             <p>○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○○</p>
             <p>○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○○</p>
         </div>
      </div>
     </section>
  
  

      自分の写真⇩
      <div class="gazou3">
            <img class="gazou2" src="//">
            </div>
    </main>

    <footer>
        <div class="end">
          <p>Copyright©</p>
          <p>フッター色々</p>

        </div>
    </footer>






         

        
</body>
```ここに言語を入力
コード
```
css
@charset "UTF-8";

*{
    margin: 0;
    padding: 0;

}


body{
    font-family:'Helvetica',sans-serif;
    font-weight: 100;
    
}

.gazou1{
    background-color: #f8f8ff;
    display:flex;
    justify-content: center;
    padding: 50px 50px;
 
   
}






.gazou1 img{
    
   
    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1);
    margin-top:10px;

}

.gaiyou{
    border:solid 1px #dce4ec;
    line-height: 40px;
    padding: 20px;
    width: 750px;
 
    
}
.gazou2{
    width:800px ;
}
    

.socialbtn{
    list-style: none;
    position: absolute;
    top:2px;
    right: 40px;
    display: flex;
    
    
   
}


.socialbtn img{
    max-width: 33px;
    padding:20px;
    
}

.my-color{
    color: gray;
}
   
  

.header-right ul{
    display: flex;
    list-style: none;
    justify-content: flex-end;
    margin-top: 130px;
 
    

}
.header-right li{
    margin-right: 60px;
  
}

.header-right a{
    color: #000;
    text-decoration: none;
    font-size: 14px;
}


.header-left{
    margin-bottom: 50px;
    position: relative;
    top: 50px;

}


.header-left h2{
font-size: 30px;
padding-left: 50px;



}
.header{
    height: 200px;
   
}




.centeralignment{
   justify-content: center;
    line-height: 50px;
    padding: 40px;
    width: 780px;
    margin: 0 auto;
    text-align:left;
    
}

.flex-contianer1{
   
    margin: 0 auto;
    text-align:left;
}



.flex-contianer2{
    width: 780px;
    margin: 0 auto;
    text-align:left;
}





.centeralignment p{
font-size: 20px;
}





 .technology li{
     list-style:none;
 }






.apps p{
    line-height: 0.1px;
    margin-bottom: 40px;

}
  
.apps span{
    color: #a9a9a9;
}




.icon-p{
    padding-left: 98px;
}


.end{
    margin: 40px;
}

.icon_man:before {
    content: url(https://placehold.jp/96x23.png) ;
    position : relative ;
    bottom : -3em ;
    right: 1em;
    margin-right : 0.1em ;
}

   
}
```
```ここに言語を入力
レスポンシブ


@charset "UTF-8";
*{
    margin: 0;
    padding: 0;

}




@media screen and (max-width:1024px){
.header-left h2{
        color: #808080;
        font-size: 40px;
       
}   
.header-right a{
    font-size: 30px;
   
}


.header-right ul{
    width: 100%;
}

.socialbtn{
    position: absolute;
    top:20px;
    display: flex;
}


.socialbtn img{
  max-width: 40px;
  margin-top: 20px;
}

.gazou1{
    width: 100%;
}
.flex-contianer1{
    width: 75%;

}

.flex-contianer2{
    width: 75%;
}


/* ******************************************** */
@media screen and (max-width:670px){
    
    
    .header-left h2{
        width: 100%;
    }



     .header-right a{
        font-size: 25px;
     }

    .header-right ul{
        position: absolute;
        top:30px;
        left:350px;

     }

     .socialbtn{
        position: relative;
        top:20px;
        left: 90px;
       
    }
     


    .gazou1{
        width: 140%;
       
    }
     
       
     .flex-contianer2{
         width: 75%;
     }
  
    
/* ******************************************** */
@media screen and (max-width:570px){
    
    .header-right ul{
        position: absolute;
        top:30px;
        left:390px;
    }

     .gazou1{
        width: 150%;
    }


     .flex-contianer1{
       width: 80%;
   
}
}
}
}
```