How to resize website "banner" to fit different size windows?

I've tried a few different things to fix this, but I have

#serverselect{
      color: white;
      background: black;
      /*TOP BAR COLOR DOJCAD is #2196f3*/
      font-family: Roboto;
      width: 100%;
      height: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

<select id="server" style= "background-color: #000000 ; color: #FFFFFF" onchange="location = this.value;">
            <option value="0" selected disabled>Select A Server</option>
            <option value="?server=1">1</option>
            <option value="?server=2">2</option>
            <option value="?server=3">3</option>
            <option value="?server=4">4</option>
            <option value="?server=5">5</option>
          </select>
        </div>

When I make the window smaller, the "banner" clutters up and makes it unusable. See linked images.

Incorrect: https://imgur.com/a/rDOOrAo Correct: https://imgur.com/a/06VKiYF