Maybe something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid darkgrey;
padding: 1rem;
margin: 1rem;
position: relative;
}
.header__title {
text-align: center;
background-color: lightgreen;
}
.header__button {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<header class="header">
<h3 class="header__title">Header text here</h3>
<button class="header__button">Button</button>
</header>
Of course you can change the background colors, border, padding, margins, ... to fit your design. This is just to illustrate where the elements are.
The key here was to use position: absolute
on the button.
position: absolute
remove the element (the button) from the document flow, so the other element (the header text) can be centered on 100% width of the page.
Some good information about position absolute here on MDN