Bootstrap , text going over header

Question

Hi guys so i have my header tab e.g my navigation bar, i have my logo on the left hand side of the screen and my text on the right hand side and then i just want a simple Statement below that in the middle of the screen, However for some reason, the Statement is overlapping the header tab and i have no idea why, if there is anther way to put the logo on the left side and the text on the right side , instead of the way i am doing it , then i am open for suggestions, thanks again

    .navbar-brand{
         margin-left:50px !important;
    }
    
    .navbar-inverse {
        background-color: transparent;
        border-color: transparent;
    }
    
    
    
    .logo {
         padding: 20px;
    }
    
    
    .navbar-right {
        margin-top: 45px;
        margin-right: 20px;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
          <div class="container-fluid">
            <div class="navbar-header">
      <div class = "logo">
      <img src="Images/logo.png" class="img-responsive"/>
      </div> 
            </div>
              <ul class="nav navbar-nav navbar-right">
                  <p>
       do you want something ? <a href="#" role="link" id="account_btn">account</a>
       </p>
              </ul>
          </div>
    </div>
    
    <H1> Hello there </h1> 
 

Again if there is an easier way to do this rather then sticking it in a nav bar then please show me, just getting started etc so learning

Thanks