My header isn't 100% the screen width and I can't figure out why?

Question

I can't seem to figure out why I'm not able to make my header 100% the screen width. I have tried some modifications such as width:100% but it didn't fix the issue. I'm still a beginner at CSS so thanks in advance for your the help.

#header {
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
}

#header .top {
    background-color: #283480;
    width: 80%;
    height: 100px;
    color: white !important;
    padding: 0 10% 0 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header .top a {
    color: white !important;
}

#header .top img {
    max-height: 90%;
}

#header .top .right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

#header .top .right div.flex {
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

#header .top .right i#iconCart {
    position: relative;
}

#header .top .right #nbProductInCart {
    position: absolute;
    color: white;
    font-weight: bold;
    background-color: red;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    right: -6px;
    top: -6px;
}

#header .top .right #nbProductInCart:empty {
    display: none;
}

#header .top .right i.bigIcon {
    width: 30px;
}

#header .top .right a {
    text-decoration: none;
    font-size: 1.2em;
}

#header .top .right ul li {
    display: inline-block;
}

#header .bottom {
    width: 100%;
    color: black;
    position: relative;
}

#header .bottom ul.nav {
    height: 70px;
    background-color: #FFFFFF;
    margin: 0;
    overflow: hidden;
    box-shadow: 0 5px 8px #c5c0c0;
    width: 80%;
    padding: 0 10% 0 10%;
    display: flex;
    flex-wrap: wrap;
}

#header .bottom ul li.familleItem {
    display: flex;
    align-items: center;
    padding: 0 25px 0 25px;
    margin: 0;
    text-decoration: none !important;
    font-size: 1.2em;
    color: #414141;
    height: 100%;
    text-transform: uppercase;
}

#header .bottom ul li a {
    text-decoration: none !important;
    color: #414141;
}

#header .bottom ul li.itemSousFamille span.title a {
    color: #283480;
}

#header .bottom ul li.itemSousFamille .itemCategorie a.moreSubFam {
    color: #283480 !important;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    text-decoration: underline !important;
}

#header .viewSousFamille {
    box-shadow: inset 0 5px 8px #c5c0c0;
    min-height: 60vh;
    background-color: #FFFFFF;
    display: none;
    width: 80%;
    font-size: 19px;
    margin: 0 10% 0 10%;
    z-index: 2;
    position: absolute;
}

#header .viewSousFamille.withSubtop {
    margin: -115px 10% 0;
}

#header .viewSousFamille ul.sousFamilleList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#header .viewSousFamille ul.sousFamilleList .title {
    font-weight: bold;
    display: list-item;
    list-style: disc inside;
    color: #283480 !important;
}

#header .viewSousFamille ul.sousFamilleList li.itemSousFamille {
    width: 23%;
    padding: 1%;
}

#header .viewSousFamille ul.categorieList {
    margin-top: 10px;
}

#header .viewSousFamille ul.categorieList li.itemCategorie {
    padding-top: 2px;
    font-size: 17px;
}

#header .viewSousFamille ul.categorieList li.itemCategorie a:hover {
    text-decoration: underline !important;
}

#header .bottom ul li.familleItem.active {
    background-color: #0000001a;
}

#header .bottom ul li.familleItem:hover {
    background-color: #0000001a;
}

#header .bottom ul li.familleItem.noHover:hover {
    background-color: transparent;
}

#header .bottom ul li.familleItem.destockNav a {
    color: white !important;
    padding: 9px;
    background-color: #dc2e39;
    border-radius: 5px;
}

#header .top #login-card {
    position: absolute;
    top: 60px;
    width: 100%;
    min-height: 15vh;
    background: #F3F3F3;
    border-radius: 5px;
    box-shadow: 0 2px 9px #c5c0c0;
    color: black;
    display: none;
    z-index: 3;
}

#header .top .right #account-card {
    position: absolute;
    top: 60px;
    width: 100%;
    min-width: 350px;
    background: #F3F3F3;
    border-radius: 5px;
    box-shadow: 0 2px 9px #c5c0c0;
    color: black;
    display: none;
    z-index: 3;
}

#header .top .right #account-card .title {
    padding: 10px;
    margin-top: 15px;
    font-size: 18px;
    color: #414141;
}

#header .top .right #account-card li {
    width: calc(100% - 20px);
    margin: 10px auto;
    box-sizing: border-box;
    display: block !important;
    background-color: white;
}

#header .top .right #account-card li > a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #414141 !important;
}

#header .top .right #account-card li > a > i {
    margin-right: 5px;
}

#header .top .right #account-card li a:hover {
    background-color: #d4d4d4;
}

#header .top #account-card .triangle-up {
    position: absolute;
    margin: 0 auto;
    left: calc(50% - 12px);
    top: -11px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 12px 12px;
    border-color: transparent transparent #F3F3F3 transparent;
}

#header .top #login-card form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
}

#header .top #login-card form .title {
    font-size: 1.2em;
    margin-bottom: 25px;
}

#header .top #login-card form input {
    width: 90%;
    margin: 5px 0;
    padding: 3%;
    border-radius: 4px;
    border: 1px solid #0000004a;;
}

#header .top #login-card form a.pswForgot {
    margin-top: 25px;
}

#header .top #login-card form a {
    color: #6C6C6C !important;
    text-decoration: none;
    padding: 2px;
    font-size: 1em;
}

#header .top #login-card form a:hover {
    text-decoration: underline;
}

#header .top #login-card form button {
    margin-top: 25px;
}

#header .top #login-card .triangle-up {
    position: absolute;
    margin: 0 auto;
    left: calc(50% - 12px);
    top: -11px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 12px 12px;
    border-color: transparent transparent #F3F3F3 transparent;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div id="header">
    <div id="overlay-focus"></div>
    <div class="top">
        <div class="searchBox">
            <form method="get" action="search" accept-charset="UTF-8">
                <div id="containerSearch">
                    <span class="triangle-left"></span>
                    <input id="research" type="text" name="search"
                           placeholder="Rechercher un produit..." autocomplete="off"/>
                    <button>
                        <i class="icon-search"></i>
                    </button>
                </div>
            </form>
        </div>
        <div class="right">
            <c:choose>
                <c:when test="${ not empty sessionScope.client }">
                    <div class="flex relative">
                        <i class="icon-user fs-25"></i>&nbsp;<a id="myOptions"
                                                                href="#">&nbsp;<c:out
                            value="${sessionScope.client.nom} ${sessionScope.client.prenom}"/></a>&nbsp;&nbsp;&nbsp;<i
                            class="icon-down-open fs-20">
                    </i>
                        <div id="account-card">
                            <span class="triangle-up"></span>
                            <p class="title">Bonjour ${sessionScope.client.prenom}</p>
                            <ul class="links">
                                <li><a href="/monCompte"><i class="icon-user"></i>Espace client</a></li>
                                <c:choose>
                                    <c:when test="${sessionScope.client.type_client != 'particulier' && sessionScope.client.profil == 'acheteur'}">
                                        <li><a href="#"><i class="icon-ok"></i>Paniers en cours de validation</a></li>
                                    </c:when>
                                    <c:when test="${sessionScope.client.type_client != 'particulier' && sessionScope.client.profil == 'valideur'}">
                                        <li><a href="#"><i class="icon-ok"></i>Paniers &agrave; valider</a></li>
                                    </c:when>
                                </c:choose>
                                <li><a href="/logout"><i class="icon-logout"></i>D&eacute;connexion</a></li>
                            </ul>
                        </div>
                    </div>
                </c:when>
                <c:otherwise>
                    <div class="flex relative">
                        <i class="icon-user fs-25"></i>&nbsp;<a
                            href="#" id="myAccount">&nbsp;Mon compte</a>&nbsp;&nbsp;&nbsp;<i id="myAccount"
                            class="icon-down-open fs-25"></i>
                        <div id="login-card">
                            <span class="triangle-up"></span>
                            <form action="login" method="post" accept-charset="UTF-8">
                                <p class="title">Espace client</p>
                                <input name="login" autocomplete="username" type="text"
                                       placeholder="Nom d'utilisateur"/> <input name="psw"
                                                                                type="password"
                                                                                autocomplete="current-password"
                                                                                type="text"
                                                                                placeholder="Mot de passe"/> <a
                                    class="pswForgot"
                                    href="forgottenPassword">Mot de passe oubli&eacute;?</a> <a
                                    href="signup">Nouveau client?</a>
                                <button type="submit" class="button red-blue">CONNEXION</button>
                            </form>
                        </div>
                    </div>
                    &nbsp;&nbsp;&nbsp;
                    <!-- <a href="signup">Inscription</a> -->
                </c:otherwise>
            </c:choose>
        </div>
    </div>

    <div class="bottom">
        <ul class="nav">
            <c:forEach items="${ familleCollection }" var="famille">
                <li class="familleItem"><a
                        href="listF${famille.idFamilles}__${famille.libelle }">${ famille.libelleCapitalized }</a>
                    <ul style="display: none;" class="sousFamilleList">
                        <c:forEach items="${famille.ssFamillesByIdFamilles}"
                                   var="sousFamille">
                            <li class="itemSousFamille"><span class="title"><a
                                    href="listSF${sousFamille.idSsfamilles}__${ famille.libelle }__${sousFamille.libelle}">${sousFamille.libelleCapitalized}</a></span>
                                <ul class="categorieList">
                                    <c:set var="compteur" value="0"/>
                                    <c:forEach items="${sousFamille.categoriesByIdSsfamilles }"
                                               var="categorie">
                                    <c:set var="compteur" value="${compteur + 1}"/>
                                    <c:if test="${compteur == 6}">
                                    <span style="display:none;" class="subFamList${sousFamille.idSsfamilles}">
                                        </c:if>
                                        <li class="itemCategorie"><a
                                                href="listC${categorie.idCategories}__${ famille.libelle }__${sousFamille.libelle}__${categorie.libelle }">LOREM IPSUM</a>
                                        </li>
                                    </c:forEach>
                                                <c:if test="${compteur > 5}">
                                            </span>
                                    <li class="itemCategorie">
                                        <a class="moreSubFam" data-visible="n"
                                           data-attachment=".subFamList${sousFamille.idSsfamilles}">+ de cat&eacute;gories</a>
                                    </li>
                                    </c:if>
                                </ul>
                            </li>
                        </c:forEach>
                    </ul>
                </li>
            </c:forEach>
            <li class="familleItem noOverview"><a href="marques">Nos marques</a></li>
            <li class="familleItem noOverview noHover destockNav"><a href="#">Destockage</a></li>
        </ul>
        <div class="viewSousFamille"></div>
        <c:if test="${not empty subtop}">
            <div id="subtop">
                <div class="contentWrapper">
                    <h3 id="title">H3 example</h3>
                    <p id="ariane">P example</p>
                </div>
                <div class="shadow"></div>
            </div>
        </c:if>

    </div>


</div>
<div id="content">
</div>
</body>
</html>

Here is a screenshot illustrating the problem I'm having: screenshot of broken header

Answer 1

your header .top affects the css of the main header. you should do this:

#header .top {
    background-color: #283480;
    width: 100%;
    height: 100px;
    color: white !important;
    padding: 0 10% 0 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}