Temat: Pomoc HTML / CSS

mam pytanie związane z html i css. Robię stronę www
Utworzyłem klasę page-header zawierającą figure img i dwa nagłówki H1 i H2.

W CSS utworzyłem reguły dla tych elementów. Dla Samego page-headera i nagłówków reguły działają prawidłowo,
natomiast dla figure img, które jest w page-headerze reguła nie działa.

Zaczyna działać jak usunę .page-header

HTML
<div class="page-header">
<div class="row">
<div class="ccol-xs-12 col-sm-12 col-md-3">
<figure>
<img src="images/tour_leader.jpg" alt="tour-leader logo" id="tour" class="img-responsive">
</figure>
</div>
<div class="ccol-xs-12 col-sm-12 col-md-9">
<h1>Idegenvezetés magyar nyelven Łódź varosban és környéken</h1>
<h2>XXX - idegenvezető</h2>
</div>
</div>

</div>

CSS
.page-header {
border: 4px ridge dimgrey;
padding: 2.5%;
background-image: linear-gradient(floralwhite, ghostwhite);
}

.page-header h1, .page-header h2 {
color: #1f1f1f;
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
//Po usunięciu .page-header reguła dla figure img działa poprawnie
.page-header > figure img {
width: 45%;
}

przecież figure img jest zagnieżdżone w page-header powinno razem działać.