FIXED: Margins navigation bar

HTML-CSS
1

Hi Everyone!

I’m trying to build my first site from scratch. I have my navi bar ready online and I want it 350px from the right. But when I do that the items in my navigation bar spread out.

I already tried to give a class to the far most right item and only give that item 350px marging-right but it doesnt work. This is what I have so far. I tried to google it but maybe I’m not using the right words. Hope someone finds joy in helping me out! Thanks in advance!

HTML
<nav class="navigation">
    <img class="logo" src=# alt="logo" />
  <a href=#>Connect</a>
  <a href=#>Projects</a>
  <a class="active" href=#>About</a>
</nav>

CSS
.navigation a {
    display: inline-block;
    vertical-align: top;
    margin-top: 45px;
    margin-right: 350px;
    float: right;
    color: white;
    text-decoration: none;
    text-align: right;
    padding: 5px 5px;
    font-size: 16px;
    font-family: sans-serif;
}
.navigation a:hover {
    text-decoration: underline;
    color: white;
}
.navigation a.active {
    text-decoration: underline;
    color: white;
}
2

You are using margin-right: 350px for each a tag inside .navigation.
It means it applies margin-right for each item in the nav.

Did you try to use margin-right: 350px on nav tag or navigation class (.navigation) instead of “.navigation a”?
This way you will apply the margin-right to the “parent” of the items; the entire navbar.

3

Wauw thank you! It worked. I would have never been able to fix that on my own.
Thank your helping out :)!