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>