Tag problems in CSS files in a JSF2 project

Greetings to all,

I would like you to look at the image below;

YoumaynoticethatthereisabluetopwithaHorizontalmenu,itisattachedtothistagbelowinXHTML;

<header><divstyle="float: right; margin-right: 110px">
    <span
        style="float: left; height: 30px; line-height: 30px; margin-right: 60px">
        Olá usuário! </span>

    <h:form style="display: inline-block">
        <p:menubar styleClass="menu-sistema">
            <p:submenu label="Cadastros">
                <p:menuitem value="Usuários" />
                <p:separator />
                <p:menuitem value="Empresa" outcome="/empresa/CadastroEmpresa" />
                <p:menuitem value="Clientes" outcome="/cliente/CadastroCliente" />
                <p:menuitem value="Categorias" />
            </p:submenu>
            <p:submenu label="Pesquisa">
                <p:menuitem value="Pesquisar Clientes" outcome="/cliente/PesquisaCliente"/>
                <p:menuitem value="Pesquisar Empresas" outcome="/empresa/PesquisaEmpresa" />
            </p:submenu>
            <p:submenu label="Tarefas">
                <p:menuitem value="Adicionar Tarefas" />
            </p:submenu>
            <p:menuitem value="Sair" />
        </p:menubar>
    </h:form>
</div>
<div style="clear: both"></div>

</header>

And with this setting in CSS

header {
    padding: 5px 0px;
    margin-bottom: 20px;
    height: 40px;

    background-color: #4169E1;
    color: #fff;

    box-shadow: 0px 2px 2px #ccc;
}

There's nothing wrong with XHTML and CSS, but I'm facing a strange problem.

I've always made web pages in my academic projects using CSS with HTML, but I put the CSS settings in a JSF2 project I started to face CSS configuration problems, I created the tags on the XHTML page with CSS and not it works nothing, I'll give an example, I'll take the same example shown above and modify it, we know that when we put the HTML page as

<div id="topo"></div>

CSS will be

 #topo

So far beauty, I'll replace the tag with and it will look like this.

<div id="topo">

<div style="float: right; margin-right: 110px">
    <span
        style="float: left; height: 30px; line-height: 30px; margin-right: 60px">
        Olá usuário! </span>

    <h:form style="display: inline-block">
        <p:menubar styleClass="menu-sistema">
            <p:submenu label="Cadastros">
                <p:menuitem value="Usuários" />
                <p:separator />
                <p:menuitem value="Empresa" outcome="/empresa/CadastroEmpresa" />
                <p:menuitem value="Clientes" outcome="/cliente/CadastroCliente" />
                <p:menuitem value="Categorias" />
            </p:submenu>
            <p:submenu label="Pesquisa">
                <p:menuitem value="Pesquisar Clientes" outcome="/cliente/PesquisaCliente"/>
                <p:menuitem value="Pesquisar Empresas" outcome="/empresa/PesquisaEmpresa" />
            </p:submenu>
            <p:submenu label="Tarefas">
                <p:menuitem value="Adicionar Tarefas" />
            </p:submenu>
            <p:menuitem value="Sair" />
        </p:menubar>
    </h:form>
</div>
<div style="clear: both"></div>

</div>

And in CSS it will look like this;

#topo {
    padding: 5px 0px;
    margin-bottom: 20px;
    height: 40px;

    background-color: #4169E1;
    color: #fff;

    box-shadow: 0px 2px 2px #ccc;
}

Actually, it was supposed to keep working, but that's not what happens, see what happened;

It just did not work.

I would like to know if there is a different way to program the XHTML pages in JSF2 projects for CSS

For the changes I made was to keep working, because I just changed the name of the tag, nothing more.