CSS auto margin on one side - html

Question

I have a small dilemma with a page design. It's best described in image form.
The top image represents the page as it is now - blue being my nav container and yellow, the page content.
At present, the nav is a full width (split left and right) while content is limited to 1024px wide and simply centered using margin auto.
However, on wide pages this looks odd. So, what I'd like to do is right align the menu items with the right-hand side of the content (as in the lower image). The issue being that I don't know the width of the left/right margin.
I have no doubt that this can be achieved using javascript but given that its fundamental to the page design, I'd rather try and achieve something using CSS.
At present, I'm not even sure this is achievable using CSS alone - anyone done something like this before?
header {
background: blue;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 24px;
height:64px;
width: 100%;
}
.title {
flex: initial;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
nav {
flex: 0 0 auth;
margin-left:40px;
}
ul {
display:flex;
list-style: none;
}
ul > li > a {
color:Black;
padding:0 16px;
white-space:nowrap;
}
main {
background-color:yellow;
max-width:1024px;
margin:0 auto;
}
<header>
<div class="title">This is a really long title that replaces the logo.</div>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
</nav>
</header>
<main>
<p>
This is some content.
</p>
</main>

Answer 1

You can do some calculation with calc(). The header is 100% width and the content is 1024px so inside the header you need to add a padding right equal to one margin which is : (100% - 1024px)/2
body {
margin:0;
}
header {
background: blue;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 24px;
padding-right: calc((100% - 1024px) / 2);
height: 64px;
}
.title {
flex: initial;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
nav {
flex: 0 0 auth;
margin-left: 40px;
}
ul {
display: flex;
list-style: none;
}
ul>li>a {
color: Black;
padding: 0 16px;
white-space: nowrap;
}
main {
max-width: 1024px;
margin: 0 auto;
background: yellow;
}
<header>
<div class="title">This is a really long title that replaces the logo.</div>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>ul>
</nav>
</header>
<main>
<p>
This is some content.
</p>
</main>

Answer 2

Something like this?
<header>
<div class="title">Mysite.co.uk</div>
<nav id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
</nav>
</header>
header {
width: 100%;
background: blue;
position: relative;
}
header nav {
width: 100%;
max-width: 1024px;
margin 0 auto;
}
header .title {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
}
FIDDLE

Answer 3

You can do something like that:
header {
height: 40px;
display: block;
background: blue;
color: white;
}
nav {
position: absolute;
right: 0;
left: 0;
top: 0;
}
ul {
width: 400px;
margin: auto;
display: flex;
justify-content: flex-end;
padding: 0;
}
section {
background: yellow;
width: 400px;
margin: auto;
}
<header>
Logo
<ul>
<li>item1</li>
<li>item1</li>
</ul>
</header>
<main>
<section>content</section>
</main>