CSS: класс hover влияет на внутренние div

.header-news-item {
   height:35px; 
   width:250px; 
   font-size:11px; 
   border: 2px solid #ddeeee; 
   float:left; 
   margin:0px 10px; 
   padding:7px; 
   padding-top: 5px;
   border-radius: 7px; 
   line-height:1.3; 
   background-color:#f9f9f9;

}

.header-news-item :hover {
    border: 2px solid #aadddd; 
    background-color:#f9f9f9;

}

У меня есть элемент div с отображаемой рамкой. Я хочу изменить цвет этой границы при наведении курсора. Итак, у меня есть псевдокласс :hover, определенный в CSS. Проблема в том, что граница этого div не меняется, а вместо этого меняются границы внутренних div. Это почему? Как я могу это исправить?

<div class="header-news-item">

    <div> title        </div>   <- 
    <div> subtitle     </div>   <- borders of these inner divs are changed
    <div> read more... </div>   <-

</div>