Landing product topbar help

Landing product topbar help
0

#1

Hello! I´ve used Flexbox to make the topbar, but there seems to be an extra box there (at the end) that doesn´t really contain any item whatsoever. Why does this happen? Code: https://codepen.io/HernanF/pen/eLJjaM
Thanks in advance!


#2

Hello @HernanFaifman

The problem is that you are declaring flex on each element, flex is only applied to the container, and then after you can use the different properties to adjust the elements.

I suggest rethinking the nav-link section, instead of using ul and lis, why don’t you use links directly knowing the fact that they are by default inline and you don’t have to flex them, inline them or float them?

You’d better keep them as links only by converting ul to a div and then deleting the lis:

<div id="nav-link">
    <a class="nav-link" href="#whatwesell">What we sell</a>
    <a class="nav-link" href="#features">Features</a>
    <a class="nav-link" href="#wheretogetit">Where to get it</a>
</div>

Those margins and all those styles applied to a elements should be deleted too and replaced with better styling.

Note: You can delete the underline by using text-decoration:none on a elements.


#3

Thank you for the reply. I´ll try and see what I can do!


#4

No problem.

Good luck & Happy Coding!