Класс Clearfix для HTML5Boilerplate не помещается на содержащий элемент

Question

На веб-сайте stinsonandassociates.com в своем мобильном навигационном меню (см. Небольшие ширины экрана) используется clearfix. Он не работает, но мне любопытно, почему класс clearfix, который я применяю (используя HTML5Boilerplate), по крайней мере не признает свойства clearfix. В настольном навигационном меню используется тот же класс, и он работает.

Это HTML код:

<header> 
<h1>Bob Stinson</h1> 
<a href="/" title="Home Page"> 
    <img src="img/bobstinson_signature_v2.png" 
     alt="Bob Stinson signature" width="211" height="170" /></a> 
</header> 
<nav id="topNav"> 
    <h2>Top Navigation</h2> 
    <ul class="desktop clearfix"> 
     <li><a href="/" title="Home Page" class="current">Home</a></li> 
     <li><a href="psychology" title="Psychology" 
       id="psychologyButton">Psychology</a></li> 
     <li><a href="law" title="Law" id="lawButton">Law</a></li> 
     <li><a href="about" title="About">About Us</a></li> 
    </ul> 
</nav>  
<nav class="mobile clearfix"> 
    <ul> 
     <li><a href="" title="Home Page">Home</a></li> 
     <li><a href="psychology" title="PsychologyPage">Psychology</a></li> 
     <li><a href="law" title="Law Page">Law</a></li> 
     <li><a href="about" title="Law Page">About Us</a></li> 
     <li><a href="contact" title="Law Page">Contact</a></li> 
     <li><a href="legal" title="Law Page">Legal</a></li> 
    </ul> 
</nav> 

Answer 1

Я скопировал код и мне кажется, что закрывающая скобка исправляет проблему:

Выше всех элементов списка внутри <nav class="mobile clearfix"> ... </nav>

@media only screen and (min-width: 481px) { 
    /* Style adjustments for viewports that meet the condition */ 

    /* Page Layout */ 
    .... 
    /* About Us */ 
    .about h2 { 
    text-align: left; 
    } 
} /* <--- i added this bracket */ 

Имеет ли thi s исправить вашу проблему?