I want to move in my navigation bar in a non gimmicky way-CodePudding

I'm quite very new to HMTL and CSS, having just coded in C# before.

I got this fiddle here https://jsfiddle.net/4asrj9x6/24/

<html>
  <header>

    <body>
      <nav>
        <ul class="navigation">
          <li><a href="index.html">Home</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li><a href="about.html">About</a></li>

        </ul>
      </nav>
  </header>
  <main class="grid">
    <aside></aside>
    <section>
      <h1>Header</h1>      
        <img src="https://via.placeholder.com/620x350.jpg">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
        placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
        diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
        commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
      </p>
    </section>
    <section>
      <h1>Header</h1>
        <img src="http://placehold.it/620x350.jpg">        
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
        placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
        diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
        commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
      </p>
    </section>
    <section>
      <h1>Header</h1>      
        <img  src="http://placehold.it/620x350.jpg">       
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
        placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
        diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
        commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
      </p>
    </section>
    <aside></aside>
  </main>

  </body>

</html>

* {
  box-sizing: border-box;
}

header {
  margin-top: none;
  width: 100%;
  height: 80px;
  filter: drop-shadow(0px 8px 8px hsla(0, 0%, 0%, 0.24));
  background-color: whitesmoke;

}

header nav {
  display: flex;
  justify-content: flex-end;
  height: 100%;
}

.navigation {
  list-style-type: none;
  display: inline;
}
li a{
     display: block;
    text-align: center;
    text-decoration: none;
}
.navigation li {
  display: inline-flex;
  height: 100%;
  padding: 10px;
  font-size: 24px;
}

main {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% auto;
  grid-gap: 20px;
}

aside {
  margin: none;
}

section h1 {
  text-align: center;
  font-size: 24;
  font-weight: bold;
}

section img {
  width: 100%;
}

section img:hover {
  opacity: 50%;
  transition: 0.1s;
}

section p {
  font-size: 18px;
}

What I want to accomplish is to move in my nav bar links from the right edge. So that the end of 'About' is sort of aligned with the end of the third image.

What I've tried is to add a lot of padding to the navigation class. However this feels super gimmicky and it doesn't scale well at all. Since as soon as you move the window even a tiny bit it goes all wrong.

There should be a better way to do this but I feel kind of stuck.

CodePudding user response：

You have to give your nav-bar a width to work with, since you have justify-content set to flex-end it will always be on the end depending on the width you have set.

Give your nav-bar a reasonable width and line in up with the third image.

Final code:

header nav {
    display: flex;
    justify-content: flex-end;
    height: 100%;
    width: --your-desirable-width;
    margin-right: auto;
}

This is responsable and it'll always be ..% of the screen.