title: Bootstrap Container Class Not Taking Up Full Width Mobile Devices
body: <p>I have a registration form I am trying to make more user friendly for mobile devices.  I'm using Bootstrap 4 and trying to get my registration form to take up the full width of the screen for smaller devices like iPhones, etc., I have used the appropriate container class name for the div containing my row and form.  And I have given my form a class of 'col' so it takes up the full width.  But the problem is the container.  And when I try and target the breakpoint in my child theme's style sheet, I am not able to affect the container.  How can I get the container to stretch 100% of the width of smaller devices?  I am using the Ocean-WP child theme. You can view the page in question on a mobile device at the following link: <a href="http://www.statesoccerpass.com/player-registration-page/" rel="nofollow noreferrer">http://www.statesoccerpass.com/player-registration-page/</a></p>
  
  <pre><code>&lt;div class="container" style="border: 2px solid green;"&gt;
          &lt;h1 id="page_title"&gt;Player Registration Page&lt;/h1&gt;
          &lt;?php echo $season_text ?&gt;
              &lt;!-- &lt;div class="row"&gt;&lt;?php //display_progress(1);?&gt;&lt;/div&gt; --&gt;
                  &lt;div class = "row"&gt;
  
                      &lt;form style="border: 2px solid yellow;" class= "col" id = "player_info" name="player_info" action="http://www.statesoccerpass.com/index.php/player-registration-step-2/" method="post"&gt;  
  
                          &lt;fieldset class="form-group"&gt;
  
                          &lt;span&gt;Passes are valid for both Fall 2018&lt;?php echo $season_year_start_text; ?&gt; and Spring 2019&lt;?php echo $season_year_end_text; ?&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                          Player passes expire July 31, 2019&lt;?php echo $this_season_end-&gt;format('n/j/Y'); ?&gt;&lt;br /&gt;&lt;br /&gt;Can't find your team? If your team is new for this fall, please remind your coach to register the team so that players can register.  &lt;br /&gt;&lt;br/&gt;
                          &lt;/span&gt;
  
                          &lt;div class="form-group" style="border: 2px solid red;"&gt;
                                  &lt;label class="col-sm col-lg-2" for="league_id"&gt;1. Select your league&lt;/label&gt;
                                  &lt;select class= "col-sm col-lg-10" id = "league_id" name="league_id" size="1" style="width: 304px;" onchange=""  tabindex = "2" &gt;
                                      &lt;option value='a' selected&gt; -- &lt;/option&gt;
                                      &lt;?php echo display_active_leagues_select()?&gt;
                                  &lt;/select&gt;
                          &lt;/div&gt;  
  
                          &lt;div class="form-group" style="border: 2px solid red;"&gt;
                                  &lt;label class="col-sm col-lg-2" for="division_id"&gt;2. Select your division&lt;/label&gt;
                                  &lt;select class="col-sm col-lg-10" id="division_id" name="division_id" size="1" style="width: 304px;"  tabindex = "2" &gt;
                                      &lt;option  value='a' selected&gt; -- &lt;/option&gt;
                                      &lt;!--insert divisions here via ajax --&gt;
                                  &lt;/select&gt;
                          &lt;/div&gt;
  
                          &lt;div class="form-group" style="border: 2px solid red;"&gt;
                                  &lt;label class="col-sm col-lg-2" for="team_id"&gt;3. Select the team you want to join&lt;/label&gt;
                                  &lt;select class="col-sm" id="team_id" name="team_id" size="1" style="width: 304px;"  tabindex = "3" &gt;
                                      &lt;option value='a' selected&gt; -- &lt;/option&gt;
                                      &lt;!-- insert teams here via ajax --&gt; 
                                  &lt;/select&gt;
                          &lt;/div&gt;
  
                          &lt;div class="form-group" style="border: 2px solid red;"&gt;
                                  &lt;label class="col-sm col-lg-2" for="player_first_name"&gt;Enter your first name&lt;/label&gt;
                                  &lt;input class="col-sm" type="text" name="player_first_name" id = "player_first_name" tabindex = "4" style="width: 300px;"&gt; 
                          &lt;/div&gt;  
  
                          &lt;div class="form-group" style="border: 2px solid red;"&gt;
                                  &lt;label class="col-sm col-lg-2" for="player_middle_name"&gt;Enter your middle name&lt;/label&gt;
                                  &lt;input class="col-sm" type="text" name="player_middle_name" id="player_middle_name" tabindex = "5" style="width: 300px;"&gt; 
                          &lt;/div&gt;  
  
                          &lt;div class="form-group" style="border: 2px solid red;"&gt;
                                  &lt;label class="col-sm col-lg-2" for="player_last_name"&gt;Enter your last name&lt;/label&gt;
                                  &lt;input class="col-sm" type="text" name="player_last_name" id="player_last_name" tabindex = "6" required style="width: 300px;"&gt;
                          &lt;/div&gt;
                          &lt;div class="col" style = 'font-size: 12pt;'&gt;You must have a matching government issued picture ID.&lt;/div&gt;
  
                          &lt;div class="form-group" style="border: 2px solid green;"&gt;   
                                  &lt;label class="col" for="player_birth_month" &gt;Enter your date of birth (Month/Day/Year)&lt;/label&gt;
  
                                  &lt;div class="col-sm col-lg-6" style="border: 2px solid red;margin:0 auto;"&gt;
  
                                      &lt;div class="col-sm-3" style="border: 2px solid;display:inline;"&gt;
                                      &lt;label class="col-sm-1 col-lg-1" for="player_day_month" &gt;Month&lt;/label&gt;
                                          &lt;select class="col-sm-1 col-lg-1" name="player_birth_month" id="player_birth_month" required tabindex = "13"&gt;
                                              &lt;option value=""&gt;&lt;/option&gt;
                                              &lt;?php select_month_input()?&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="form-group" style="border: 2px solid;display:inline;"&gt;
                                          &lt;label class="col-sm-1 col-lg-1" for="player_day_month" &gt;Day&lt;/label&gt;
                                          &lt;select class="col-sm-1 col-lg-1" name="player_birth_day" id="player_birth_day" required tabindex = "14"&gt;
                                              &lt;option value=""&gt;&lt;/option&gt;
                                          &lt;?php select_day_input()?&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="form-group" style="border: 2px solid;display:inline;"&gt;
                                          &lt;label class="col-sm-1 col-lg-1" for="player_year_month" &gt;Year&lt;/label&gt;
                                          &lt;select class="col-sm-1 col-lg-1" name="player_birth_year" id="player_birth_year" required tabindex = "15"&gt;
                                              &lt;option value=""&gt;&lt;/option&gt;
                                          &lt;?php select_birthyear_input()?&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
  
                                  &lt;input type="hidden" id="product_id" name = "product_id" value="0" /&gt;
                                  &lt;input type="hidden" id = "product_type" name = "product_type" value="player_signup" /&gt;
                                  &lt;input type="submit" style="font-size:24px; color:#0000FF;" value="Continue" tabindex = "20"&gt;
                              &lt;/fieldset&gt;
                              &lt;/form&gt;
                      &lt;/div&gt;&lt;!--end form row--&gt;
              &lt;?php
              //echo "&lt;br/&gt;Session user_id: " .get_session_value('user_id');
              require_once  $_SERVER ['DOCUMENT_ROOT'] . '/cart/cart-footer.php';
              require_once  $_SERVER ['DOCUMENT_ROOT'] . '/libraries/user-footer.php';
              ?&gt;
              &lt;?php display_admin_footer(); ?&gt;
      &lt;/div&gt;&lt;!--end bootstrap container div --&gt;
  </code></pre>
  
  <p>My media query: </p>
  
  <pre><code>@media (min-width: 576px) {
      .container{
          max-width:100% !important;
      }
  }
  </code></pre>