質問: ``` HTML CSS Bootstrap ``` ### Airbnbサイトの模写をしています。レスポンシブ対応させたいです。 公式サイトでは、画面サイズが大きくなった時に「まるまる貸切」、「ゲスト1人」のformが横並びになります。 mediumサイズになった際に、横並びにする指定をしたいです。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/e702b2f784cfe28be823fba0cccb40ae.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/cb1609f1cf485c7671d36c28ddb3a8b0.png) ### 発生している問題・エラーメッセージ ``` formに対してのCSSで@mediaを記載して横幅を%で指定したのですが、「まるまる貸切」、「ゲスト1人」の横幅がどちらも一緒になってしまいます。 各selectタグの中にあるclassに対しての@mediaを指定すると、その指示は反映されません。 ``` ### 該当のソースコード ``` HTML Airbnbホストになって、暮らしをレベルアップ どれくらいの収入が見込めるかチェック まるまる貸切 個室 シェアルーム ゲスト1人 ゲスト2人 ゲスト3人 ゲスト4人 ゲスト5人 ゲスト6人 ゲスト7人 ゲスト8人 ゲスト9人 ゲスト10人 ゲスト11人 ゲスト12人 ゲスト13人 ゲスト14人 ゲスト15人 ゲスト16人 CSS @charset “UTF-8”; body { font-family: arial,sans-serif; } body p { color: #575757; } /*ヘッダーここから*/ header img { width: 100vw; position: relative; } div.logo img { /*width:55px;*/ width: 12%; height: auto; position: absolute; top: 20px; left: 16px; } header h1 { color: #fff; position: absolute; top: 140px; font-size: 33px; text-shadow: 2px 2px 2px #4f4f45; font-weight: bold; padding: 0 30px; line-height: 35px; font-family: ; } @media screen and (min-width: 744px) { form select.select_1 { width: 60%; background-color: gray; } } ``` ### 試したこと Bootstrapの考え方から、colで横幅を変えることができました。 しかし、selectタグの間のマージを指定することができませんでした。 ### 補足情報(FW/ツールのバージョンなど) Google chromeでSublime textを使用しています。
回答: Bootstrap のグリッドシステムを使うような案件だと思いますが、コードを見る限り使われていないようです。 あえて使っていないのか、そもそも知らなかったのかはわかりませんが、知らなかったのであれば、グリッドシステムを使えばいいと思います。