Menubar of Primefaces does not enter div

Good evening.

My menubar is not getting into the div it's contained in.

<header>
    <h:graphicImage library="img" name="logo.jpg" id="logo"/> 
    <h:form>
        <p:growl id="messages"/>

        <p:menubar>
            <p:menuitem value="Pesquisa" url="#"/>
            <p:menuitem value="Software" url="#"/>
            <p:menuitem value="Materiais" url="#"/>
            <p:menuitem value="Contato" url="#"/>
        </p:menubar>
    </h:form>
</header>

The CSS of both is:

header {
    background-color: #333;
}

#logo {
    width: 10%;
    margin-left: 12%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    display: inline;
}

.ui-menubar,.ui-menu-child,.ui-menu {
    float:right;
    margin-right:15%;
    width: 26% !important;  
    background-color: #aaa; 
}

.ui-menuitem-link.ui-corner-all.ui-state-hover {
    color: #fff;
    background-color: #000;
}

With this, I'm getting:

What I want to do is put this menu inside the header, next to the logo.