div要素を横並びにしたいです。inline-blockをCSSに書いても反映されません。

Question

前提・実現したいこと

HTML/CSSでサイトの模写をしています。

<div class="white_menu1">と<div class="white_menu2">を横並びに表示させたいのですが、inline-blockを使用してもうまく反映されません。

発生している問題・エラーメッセージ

"white_menu1"と"white_menu2"が縦並びになってしまいます。

該当のソースコード

       <div class="maintop">
        <br>
        <img src="peter-schulz-4dvX9lGBeFI-unsplash.jpg" alt="treehouse" class="responsive_img" width="600" hight="600">
      </div>
      <div class="white_menu1">
        <a class="moji_box"><strong>Tokyoでホスティングして、ひと月あたり最大<font color="#E95B6B">¥142,836</font>の収入を得ましょう</strong></a>
        <br>
        <br>
        <a class="calculation" href="#calculation"><u>予想ホスティング収入額の計算方法</u></a>
      </div>
      <div class="white_menu2">
        <a class="moji_box2">予想ホスティング収入額を更新するにはお部屋についてさらに詳しくお聞かせください</a>
        <br>
        <br>
        <input type="text" id="textbox" name="location" value="" placeholder="所在地">
        <br>    
        <select class="rent" name="rent-type">
          <option value="entirehouse">まるまる貸し切り</option>
          <option value="privateroom">個室</option>
          <option value="shareroom">シェアルーム</option>
        </select>
        <br>
        <select class="numberofppl" name="numberppl">
          <option value="1 person">ゲスト1人</option>
          <option value="2 people">ゲスト2人</option>
          <option value="3 people">ゲスト3人</option>
        </select>
        <br>
        <br>
        <a href="#" class="gest">+ ゲストが利用できる特別なスペースがあればお知らせください</a>
        <br>   
        <br> 
        <a href="#" class="listingbutton" name="button">リスティングの掲載をはじめる</a>
      </div>

.white_menu1{
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
  padding: 15px 40px 80px 40px;
}

.moji_box{
  font-size: 35px;
}

.white_menu2{
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
  padding: 15px 40px 80px 40px;
}
#textbox{
  border: 1px solid #cccccc;
  outline: 0;
  height: 50px;
  width: 350px;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 16px;
}
.rent{
  border: 1px solid #cccccc;
  outline: 0;
  height: 50px;
  width: 350px;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 16px;
}
.numberofppl{
  border: 1px solid #cccccc;
  outline: 0;
  height: 50px;
  width: 350px;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 16px;
}

.listingbutton,
a.listingbutton {
  color: #fff;
  background-color:#E95B6B;
  padding: 15px 40px 15px 40px;
  border-radius: 10px;
}
.listingbutton:hover,
a.listingbutton:hover {
  color: #fff;
  background-color:E66371;
}

.gest{
  font-size: 13px;
}

.white_menu1,.white_menu2{
  display: incline-block;
}

試したこと

CSSで下記の設定をしたのですが、反映されませんでした。
スタイルシートは別に用意しており、ヘッダーの連携はできていることを確認済みです。

.white_menu1,.white_menu2{
display: incline-block;
}

補足情報（FW/ツールのバージョンなど）

特にないです。

Answer 1

<div class="white_menu1">と<div class="white_menu2">を横並びに表示させたいのですが、inline-blockを使用してもうまく反映されません。

2つ原因があります。

• display: inline-blockを使用していない(タイプミス)。

.white_menu1,.white_menu2{
-  display: incline-block;
+  display: inline-block;
}

• それぞれのdiv要素の幅が広くて、標準的なウィンドウサイズでは横並びにならない。

それぞれにwidth: 40%;などを設定してみれば、横並びになることを確認できます。あとは、自分で好きな幅に調整してください。

これ以外に、HTML5では、font要素は廃止されています。CSSを使って色を付けましょう。

Comments

[maru0418]

ご指摘いただいた2点修正したところ横並びにすることができました。
とてもわかりやすい回答いただき、ありがとうございました。