iPhoneサイズのデバイスにh2を取り付ける方法

Question

iPhoneサイズのデバイスでh2でこの問題が発生しました。コードがうまく見えるにもかかわらず、h2は中心から外れます。私はなぜそれが起こっているのか理解できません。

/* for iPhone-sized devices */ @media only screen and (max-device-width: 480px) { 
.container { width: auto } 
body { padding: 0 } 
h1 { font-size: 1.5em; margin-bottom: 3em; text-align: left } 
h2 { font-size: 2em; margin-bottom: 1.5em; text-align: center } 
h3 { font-size: 1.8em } 
h6 { font-size: 1em; text-align: left } 
p { 
    font-size: 1.2em; 
    line-height: 1.4em; 
} 

私のウェブサイトは次のとおりです：mamufka.com

h2 off center

は、ここに私のコードです。

経験豊かな人からのヒントをお聞きしたいと思います！

Answer 1

h2要素には、マージンが中央に揃う前に側面に衝突するという一般的なルールがあります。

@media only screen and (max-device-width: 480px) { 
h2 { font-size: 2em; margin: 0 0 1.5em 0; text-align: center } 
} 

Answer 2

はH2

h2 { font-size: 2em; margin: 0 0 1.5em; text-align: center } 

Answer 3

から右/左マージンを削除してください私にはかなり良いように見えますが、あなたはそれが水平に整列したい場合は、余白を削除する必要があります。

これを試してみてください左右から：

h2 { 
    margin-left: auto; 
    margin-right: auto; 
} 

実際にテキストは、あなたがgavのスペースよりも大きいそのマージンのためにそれらをe。

Answer 4

@mediaクエリのマージンを減らしてください。このように：

@media only screen and (max-device-width: 480px){ 
    h2 { 
     margin: 2em 0em 0 0em; 
     font-size: 2em; 
     margin-bottom: 1.5em; 
     text-align: center; 
    } 
}