h1 with "float:right" displayed incorrect css

Wonders of the web appear every day and here is the problem. I have defined h1 tag into a div class. Here is the code:

.menu h1
{
    width:auto;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:30px;
    color:#2e80bf;
    float:right;
    font-weight:normal;
    font-style:italic;
    margin:0;
    padding:0;
    display:inline-block;
}

I gave it float:right; and if the heading is 2 or more words it appear in the right 开发者_运维百科as expected, but if the heading is a single word, it appear into the left side. What could be the problem?

Here is the html code:

<div class="menu">
    <div class="horizontal">
        <ul>
            <li><a href="news.php">акруално</a></li>
            <li><a href="gallery.php">галерия</a></li>
        </ul>
        <h1 style="margin-bottom:10px;">За Фитнес център Кеа Спорт</h1>
    </div>
</div>

.menu h1 {
  width: auto;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: #2e80bf;
  float: right;
  font-weight: normal;
  font-style: italic;
  margin: 0;
  padding: 0;
  display: inline-block;
}

<div class="menu">
  <div class="horizontal">
    <ul>
      <li><a href="news.php">акруално</a>
      </li>
      <li><a href="gallery.php">галерия</a>
      </li>
    </ul>
    <h1 style="margin-bottom:10px;">За Фитнес център Кеа Спорт</h1>
  </div>
</div>

I would guess that you are also floating the menu above it to the right, and that this leaves enough room to the left of the menu to fit the heading when it is as narrow as one word.

Set clear: both on the h1 if you don't want it to be moved up next to previous floats.

This is my solution based on the David's advice and it works fine:

.menu h1
{
    width:auto;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:30px;
    color:#2e80bf;
    float:right;
    font-weight:normal;
    font-style:italic;
    margin:0;
    padding:0;
    clear:right;
    }

Thank you all for the help