title: HTML/CSS: How to fix a header in the center
body: <p>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.</p>
  
  <p>Header:</p>
  
  <pre><code>&lt;div className="page-header"&gt;
           &lt;h1 id="header"&gt;Header text&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Login button:</p>
  
  <pre><code>&lt;div id="login"&gt;
  /*Displays login button if user is logged in, 'Welcome, user' if not*/   
  {this.state.loggedIn?  
      &lt;div className="welcomeText"&gt;
          &lt;p&gt;Welcome, {this.state.user}&lt;/p&gt; 
      &lt;/div&gt; :
      &lt;div&gt;
          &lt;button id="loginButton" onClick={this.onClick}&gt;Login&lt;/button&gt; 
      &lt;/div&gt; 
  }     
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#header {
      text-align:center;
  }
  
  #login {
      float:right;
  }
  
  .welcomeText {
      float:right;
  }
  </code></pre>
  
  <p>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!</p>