Issue: The search box is not resizing with the page and I can't figure out how to make it wider. Adding styles like width: 100%; hasn't worked so far.
In addition, the select dropdown box in the image linked below appears slightly clipped on the right side. I'm unsure of the cause and how to fix it.
I also need assistance with making the form fill the width of the row. Any help would be greatly appreciated. Thank you!
Image of Form
Desired Layout
Code:
<header>
<div class="container">
<form action="search.php" method="get" data-toggle="validator" role="form" class="form-inline">
<div class="row">
<h2>Enter a username and choose a category to search in</h2>
<div class="input-group">
<div class="form-group">
<input name="search" type="text" class="form-control" aria-label="..." placeholder="Search a username here" required>
</div>
</div>
<div class="input-group">
<div class="form-group">
<select class="selectpicker form-control" required>
<option value="">Category</option>
<option value="volvo">Minecraft username</option>
<option value="saab">Minecraft UUID</option>
<option value="mercedes">Mc-Market username</option>
<option value="audi">Skype username</option>
</select>
<button type="submit" class="btn btn-default">Search</button>
</div><!-- /form-group -->
</div><!-- /input-group -->
</div> <!-- /row-group -->
</form><!-- /form-group -->
</div><!-- /container-group -->
</header>