top-menuクラスをtitleクラスの横に持っていきたい

Question

htmlに

<header class="clearfix">
    <nav>
        <h1 class="title">AAA</h1>
        <ul class="top-menu">
            <h3 class="login">ログイン</h3>

            <div class="container">
            <form action="{% url 'login' %}" method="post" role="form">
                {% csrf_token %}
            <div class="form-group">
                <label class="email_form">メールアドレス</label>
                <input for="id_email" name="email" type="text" value="" placeholder="メールアドレス" class="form-control"/>
            </div>
            <div class="form-group">
                <label class="password_form">パスワード</label>
                <input id="id_password" name="password" type="password" value="" minlength="8" maxlength="12" placeholder="パスワード" class="form-control"/>
            </div>

            <button type="submit" class="btn btn-primary btn-lg">ログイン</button>
            <input name="next" type="hidden" value="{{ next }}"/>
            </form>

            </div>
        </ul>
    </nav>
</header>

と書いて、cssには

*{
    margin: 0;
    padding: 0;
}
.clearfix::after{
    content: "";
    clear: both;
    display: block;
}
header{
    width: 100%;
    height: 100px;
    background-color: pink;
}
nav{
    width: 90%;
    height: 60px;
    margin: 0 auto;
    text-align: left;
}
.title{
    float:left;
    color:white;
    font-size: 70px;
    margin-top:10px;
    padding-top:-30px;
    padding-bottom:30px;
    padding-left:80px;
    padding-right:80px;
}
.top-menu{
    float: right;
    width: 30%;
    line-height: 30px;
}

と書きました。
top-menuクラスの値をいじっても、自分の目的の場所には移動せず、文字が縦並びになってしまったり位置が大分ずれてしまいます。top-menuクラスをtitleクラスの横に若干スペースを空けて持っていきたいのですが、どう描けばそうできますか？

Comments

[m.ts10806]

それぞれの意味と用法をきちんと理解してから使うようにしてください。

Answer 1

.top-menu{
    float: left;
/*...*/
}

float:rightは右寄せです。左にあるタイトルに寄せたいなら、右ではなく左に寄せるべきでしょう。