How do I align (and keep aligned) the content of my pages (i.e., titles, headers, images, briefs) to my logo that is top left of every page?

Question

This is the navbar used for each page which also contains my logo:

<header>
    <a class="logo" href="#">My<span>Name</span></a>
    <nav>
        <ul class="navlinks">
            <li><a href="#">Work</a></li>
        </ul>
    </nav>
</header>

Here is the css:

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px 10%;
}

.logo {
  cursor: pointer;
  margin-right: auto;
  padding-left: 0;
}

.navlinks {
  display: inline-block;
  padding: 0px 20px;
}

I would like to align all my pages' content to the logo in my navbar(top left) and have it "stick" on the same vertical line that my logo is on when the page size is adjusted.

For reference on how I would like my website to work/emulate behavior: http://www.roywilhelm.com

Answer 1

use a container class

.container {
  max-width: 1200px;
  margin-inline: auto;
}
header .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px 10%;
}

.logo {
  cursor: pointer;
  margin-right: auto;
  padding-left: 0;
}

.navlinks {
  display: inline-block;
  padding: 0px 20px;
}

<header>
  <div class="container">
    <a class="logo" href="#">My<span>Name</span></a>
    <nav>
      <ul class="navlinks">
        <li><a href="#">Work</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="container">
  <p>lorem ipsum dolor sit amet....</p>
</div>