HTML/CSS: How to fix a header in the center - html

Question

HTML/CSS newbie here. I am making a web page with a text header in the top center of the page and a login button on the upper right. I'm writing in Bootstrap using React (which uses embedded HTML). Here is the code.
Header:
<div className="page-header">
<h1 id="header">Header text</h1>
</div>
Login button:
<div id="login">
/*Displays login button if user is logged in, 'Welcome, user' if not*/
{this.state.loggedIn?
<div className="welcomeText">
<p>Welcome, {this.state.user}</p>
</div> :
<div>
<button id="loginButton" onClick={this.onClick}>Login</button>
</div>
}
</div>
CSS:
#header {
text-align:center;
}
#login {
float:right;
}
.welcomeText {
float:right;
}
The issue is that the login button is pushing the header text to the left and I have no way to move it back. I can temporarily solve this using padding; however, when the login button is replaced by a username, it gets pushed over even further the longer the username is. I'd like to know how I can fix this so that the username will be right-aligned and the header will stay in place. Thanks in advance!

Answer 1

As you write in it seems it may be react or something like javascript jsx format.
for header fix you should have to write code like below. this below given code is just to fix header at top position as per your need.
.page-header{
position:fixed;
top:0;
width:100%;
}

Answer 2

I'd use absolute positioning. I've simplified the example but you should get a good idea.
HTML
<div id="page-header">
<h1 id="header">Header text</h1>
<div id="login">
<div className="welcomeText">
<p>Welcome, Test User</p>
</div>
<div>
<button id="loginButton">Login</button>
</div>
</div>
</div>
CSS
#page-header {
background-color: #f0f0f0;
padding: 1em;
position: relative;
text-align: center;
}
#login {
position: absolute;
right: 1em;
top: 1em;
}
Set position: relative on #page-header so that the child element is positioned relative to it rather than the page. Then set position: absolute on the #login element. If you set its right position it will always sit to the right of the centralised #header text.
As long as you apply to absolute position to the #login element the size of the children won't matter. You'll probably need to tweak this on smaller devices, though, as there will be text overlapping.
https://codepen.io/raptorkraine/pen/QBdbPy