CSSで余白が消えません

Question

CSSでモバイル版ホームページを作っているのですが余白が消えません。
下の写真の「関連リンク」と「ご予約・お問い合わせ」を横に揃えたいのですが余白のせい？でそろいません。

      <aside id="sidebar">
        <section>
        <div id="sidebanner">
          <h2>関連リンク</h2>
          
        </div>
        <div id="sidecontact">
          <h2>ご予約・お問い合わせ</h2>
          
        </div>
        </section>
      </aside>

　#sidebanner h2{background-color: #A6A6A6; color: #fff; margin: 0; padding: 7px 0px 5px 　0px; font-size: 20px; text-align: center;}
　#sidecontact h2{font-size: 18px; background-color: #FF342F; color: #fff; padding: 4px;}

@media (max-width:767px){
  #sidebar{width: 360px; clear: both;}
  #sidebanner{width: 100px; margin: 0; padding: 0;}
  #sidecontact{width: 100px; float: right;}
  #sidebanner{text-align: center; margin: 0;}
  #sidebar h2{margin: 0;}
  #gurunabi{display: block; margin:0; width: 90px;}
  #gurunabi img{width: 100px;}
  #twitter{float: left;}
  #facebook{float: left;}
  #twitter img,#facebook img{width: 50px; height: 50px; margin: 0;}
  #footernavi {font-size:19px;}
  .mobilenone{display: none;}
  .blank{display: inline;}
  #sidecontact{margin: 0;}
  #sidecontact address img{width: 14px; height: 20px;} 
  #sidecontact .contactbutton{font-size: 10px;}
  #sidecontact h2{width: 100px; font-size: 10px; padding: 0;}
  #sidebanner{margin-bottom: 50px;}
}

margin-bottom:50px;なし

完成図

#sidebannerと#sidecontactを入れ替えると

####試したこと
・margin,padding　両方とも0にする。

結構長い時間悩んでいるので助けていただけませんでしょうか。

Answer 1

#sidecontact と #sidebanner の順番を入れ替えるか、下記スタイルを追加するかどちらか試してみてください。

#sidebar section {
  display: flex;
}
#sidecontact {
  margin-left: auto;
}
```**動くサンプル：**[https://jsfiddle.net/j69c2dkw/](https://jsfiddle.net/j69c2dkw/)

Comments

[sakya]

回答ありがとうございます。
CSSは変わりませんでした。
IDの順番を入れ替えた状態も変化はしましたがおかしな感じになりました。
上に画像あげときます。

[kei344]

> IDの順番を入れ替えた
HTML自体の順番を入れ替えましたか？（書き方が悪かったですね、すみません）
<div id="sidecontact">
<h2>ご予約・お問い合わせ</h2>
</div>
<div id="sidebanner">
<h2>関連リンク</h2>
</div>

[sakya]

HTML自体の順番を入れ替えました。
（他はいじってません）

[kei344]

単純に順番を変えて質問文に追加された画像のようになっているなら、他の箇所でHTMLの構文がおかしくなっているなどの可能性があります。（スタイルが変わってしまっているのがHTMLの構文エラーの可能性がある）
また、他のCSSの影響も考えられます。（そもそも提示されたコードだけでは背景色が付かないので他にも指定があるかも）

[sakya]

そうですね。
このCSSはモバイル用に書き換えた＆追加したCSSなので、もとのCSSは書いてませんでした。
編集して載せておきます。

Answer 2

動くサンプル

<aside id="sidebar">
  <section>
    <div id="sidebanner">
      <h2>関連リンク</h2>
    </div>
    <div id="sidecontact">
      <h2>ご予約・お問い合わせ</h2>
    </div>
  </section>
</aside>

#sidebar section {
  display: flex;
}
#sidebanner {
  padding: 20px;
  background: #555;
  margin: 0 20px 0 0;
}
#sidecontact {
  padding: 20px;
  background: #ff0000;
}

Comments

[sakya]

これは余白を確認するためにやってみたもので、これをやる前に問題が発生しました。
一応なしバージョンの写真もあげときます。

[rikutennis]

div->spanってことですかね？
横に揃えるというのがどういう結果なのか、なんでもいいので完成図を見せて欲しいです。

[sakya]

わかりづらかったですね。
完成図載せておきました。
何度もありがとうございます。

[rikutennis]

https://jsfiddle.net/awuxqejb/3/

[sakya]

display:flex;を使ったらできました。
ありがとうございました。

[rikutennis]

よかったです！
僕も勉強中なので、お互い助け合えたら嬉しいです！