Home>
HTML CSS Bootstrap
I am copying the Airbnb site. I want to be responsive.

On the official website, when the screen size becomes larger, the forms of "Full Charter" and "One Guest" are arranged side by side.
I'd like to specify the side by side when it becomes medium size.

Error message I specified @media in CSS for
form and specified the width in%, but the widths of "Full Charter" and "One Guest" are both together .
If i specify @media for class in each select tag, the instruction is not reflected.
Applicable source code
HTML
  <body>
    <header>
      
          
       Become an Airbnb host and improve your life 
    </header>
<main>
    <section>
      <p>Check how much income you can expect</p>
        <input type = "text" name = "location" placeholder = "Petarinjaya"><label for = "room_type"></label>
      <form>
          <select name = "room type" type = "text">
            <option>Full charter</option>
            <option>Private room</option>
            <option>Shared room</option>
           </select>
        <!-<label for = "number"></label>->
          <select name = "number of people" type = "text">
            <option>1 guest</option>
            <option>2 guests</option>
            <option>3 guests</option>
            <option>4 guests</option>
            <option>5 guests</option>
            <option>6 guests</option>
            <option>7 guests</option>
            <option>8 guests</option>
            <option>9 guests</option>
            <option>10 guests</option>
            <option>11 guests</option>
            <option>12 guests</option>
            <option>13 guests</option>
            <option>14 guests</option>
            <option>15 guests</option>
            <option>16 guests</option>
          </select>
      </form>
    </section>
CSS
@charset "UTF-8";
body {
    font-family: arial, sans-serif;
}
body p {
    color: # 575757;
}
/ * From here * /
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;
    }
}

From the Bootstrap concept, I was able to change the width with col.
However, it was not possible to specify a merge between select tags.

Supplemental information (FW/tool version etc.)

I use Sublime text in Google chrome.