Почему изображение накладывается на заголовки?? - Вопросы по CSS

h1,h2{
    color:#006889;
    font-size:24px;
    margin-top:12px; - добавил расстояние с верху, но тогда опускается и основной заголовок "Статьи-----". А хотелось бы чтобы он оставался на своем месте.
    margin-bottom:12px;    
}

.container h1,.container h2{
    background:url(../images/wave.png) repeat-x left center;
}
.container hr{
    border:none;
    height:5px;
    background:url(../images/wave.png) repeat-x left top;
    margin-bottom:5px;
}

h1 {
    color: #006889;
    font-size: 24px;
    margin-top: 12px;
    margin-bottom: 12px;    
}
h2 {
    color: #006889;
    font-size: 21px;
    margin-top: 8px;
    margin-bottom: 8px;    
}
.container h1 {
    background: url(../images/wave.png) repeat-x left center;
}
.container h2 {
    background: none !important;
}