余白の左右が正しく動作しない

私が達成しようとしているのはモバイルです。私のヘッダーは、左側が3％、右側が3％です。私はあなたが何をしたのかは言うまでもありませんが、サイドスクロールバーを作ることができます。余白の左右が正しく動作しない

ここに私のコードです。

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic); 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    height: 64px; 
 
    background-color: #ECEFF1; 
 
} 
 

 
.content { 
 
    height: auto; 
 
    margin: auto; 
 
    width: 1100px; 
 
    overflow: hidden; 
 
} 
 

 
.logo { 
 
    float: left; 
 
    width: 150px; 
 
    height: 40px; 
 
    margin-top: 12px; 
 
    border-radius: 4px; 
 
    background-color: white; 
 
} 
 

 
.btn { 
 
    float: right; 
 
    width: 160px; 
 
    height: 40px; 
 
    margin-top: 12px; 
 
    border-radius: 4px; 
 
    background-color: #4285f4; 
 
} 
 

 
@media only screen and (max-width:1110px) { 
 
    .header { 
 
     width: 100%; 
 
    } 
 
    
 
    .content { 
 
     width: 100%; 
 
     margin-left: 3%; 
 
     margin-right: 3%; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Untitled Document</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="description" content=""> 
 
    <meta name="keywords" content=""> 
 
    <link rel="stylesheet" type="text/css" href="styles/main.css"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 
<body> 
 
    <header> 
 
     <div class="content"> 
 
      <div class="logo"></div> 
 
      <div class="btn"></div> 
 
     </div> 
 
    </header> 
 
</body> 
 
</html>

\私は今、かなりの時間のためにこれに対処してきたとスクロールバーがある理由を見つけ出すように見えることはできません。私はそれが何か小さいと確信しています、私はそれを見落としています。

ありがとうございます！

出典

2016-06-17 Richard Rodgers