display:inline-block;を使った部分が右に移動しない

display:inline-block;を使った部分が右に移動しません。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'accounts/top.css' %}">
  </head>
  <body>
　<div class="heading">
        <h1>LOVEYOU</h1>
        <h3>XOXO</h3>
　</div>

　<div class="newaccount">
  <h2>新規アカウントを登録する</h2>
　<h3>ご利用は全て無料です</h3>
  <form class="my-form" action="{% url 'accounts:regist_save' %}" method="POST">
      <div class="form-group">
        <label for="id_username">ユーザネーム</label>
        {{ form.username }}
        {{ form.username.errors }}
      </div>

      <div class="form-group">
        <label for="id_email">Eメール</label>
        {{ form.email }}
        {{ form.email.errors }}
      </div>
      {% csrf_token %}
    </form>
  </div>

</body>
</html>

とhtmlを書いて、

.heading{
  display:inline-block;
　padding-left:150px;
}

.newaccount{
  display:inline-block;
　padding-right:150px;
}

とcssに書いたら、
class="heading"の要素は右に移動したのですが、
class="newaccount"の要素がclass="heading"の要素の下に入ってしまいました。
理想のアウトプットは、class="heading"の横にclass="newaccount"が並んでいて、
class="heading"がブラウザの最左から150px離れていて、
class="newaccount"がブラウザの最右から150px離れているようにしたいです。
どのようにすればそのようにできますか？

行動規範の内容に同意します

回答1件

ベストアンサー

flexboxでスッキリ書けます。

html
1<html lang="ja">
2  <head>
3    <meta charset="utf-8">
4    <style>
5    .wrapper {outline: 1px solid red;
6      display: flex;
7      justify-content: space-between;
8      margin-left: 150px;
9      margin-right: 150px;
10    }
11    .heading {outline: 1px solid green;
12      /* 必要なスタイルを指定 */
13      flex: 1;
14    }
15    .newaccount {outline: 1px solid green;
16      /* 必要なスタイルを指定 */
17      flex: 3;
18    }
19    </style>
20  </head>
21
22
23  <body>
24
25    <div class="wrapper">
26      <div class="heading">
27        <p>[.heading]</p>
28      </div>
29
30      <div class="newaccount">
31        <p>[.newaccount]</p>
32      </div>
33    </div>
34
35  </body>
36</html>
37