css - text not displaying right hand side of the logo in html -

hi in below code right end of logo text want display , 3 option in single line.

expected output:

logo                               welcome guest       free register   login 

can me

.logo {    float: left;  }  .logo {    display: block;  }  .header {    margin: 10px 0;  }  .header-right ul li {    width: 52%;    float: right;  }

<div class="header">    <div class="container">      <div class="logo">        <a href="index.html">          <img src="images/logo.gif" alt="" />        </a>      </div>        <div class="header-right">        <ul>          <li>welcome guest</li>          <li>free register</li>          <li>login</li>        </ul>      </div>      <div class="clearfix"></div>    </div>  </div>

the problem giving float , width every single li.

you want ul , give display: inline-block li.

something this..

.logo {    float: left;  }  .logo {    display: block;  }  .header {    margin: 10px 0;  }  .header-right ul {    float: right;    width: 52%;  }  .header-right ul li {    display: inline-block;    margin-right: 30px;  }

<div class="header">    <div class="container">      <div class="logo">        <a href="index.html">          <img src="images/logo.gif" alt="" />        </a>      </div>        <div class="header-right">        <ul>          <li>welcome guest</li>          <li>free register</li>          <li>login</li>        </ul>      </div>      <div class="clearfix"></div>    </div>  </div>