Making mobile Nav stretch

1

https://eloquent-babbage-b15a88.netlify.app/

On mobile it will not stretch 100% width for the sub categories.

Any suggestions?


@media (min-width:01px) and (max-width:650px) {
#main-nav {
    .nav-container {
        flex-direction: column;
        align-items: center;
}

.right-side {
    width: 100%;
            ul {
                margin-top: -0.5rem;
                flex-direction: column;
                background: #fff;
                text-align: center;

                li:nth-child(4), li:nth-child(5), li:nth-child(6) {
                    display: none;
                }

}
}
}
}

Will provide HTML and rest of stylesheet if needed.

2

fcc

3

It works like that, because it is nested inside the first <li> element. It will only stretch as far as the container. Unless you use vw but that will only result to stretch to the right only.

4

Yes that’s all I could do is stretch it to the far right but couldn’t stretch it to the middle, even switching the position to relative.

So no option with the way I have it set up to make it stretch like the main list items ?

5