CSSで記事で奇妙な結果が出る

Question

私はこの質問を可能な限りシンプルにするため、すべてを画像に保存してみました。ここで

問題に関する画像は以下のとおりです。

あなたはそれは私に多くのことを不愉快にさせるべきであるよりも、部H1タグの背景が右により起こっている見ることができるように。すべての背景を左に揃えたい。

Answer 1

最後に、セクションh1タグを記事h3タグに置き換えることにしました。うまくいきます。

CSS

article { 
    margin:0px 0px; 
    padding:25px 0px; 
} 
article h1{ 
    margin:0; 
    padding:0px 5px; 
    background:rgb(180,90,90); 
} 
article h3{ 
    margin:0; 
    padding:0px 10px; 
    background:rgb(90,90,180); 
} 
section { 
    padding:0px 5px; 
    background:rgb(90,180,90); 
} 

HTML

<article> 
    <h1>Article h1</h1> 
     <h3> Article h3</h3> 
     <section> 
     Section text 
     </section> 

     <h3> Article h3</h3> 
     <section> 
     Section text 
     </section> 
    </article>