title: Bulma columns mobile overflowing body
body: <p>I'm trying to use bulma columns but they are overflowing the body in mobile views. In the next picture you can see the white gap to the right of the screen. I inspected and the body tag is flush with the 'tomato' section's right border. However when the instance of columns appears it overflows the body tag and creates horizontal scrolling.</p>
  
  <p>Thanks in advance for your help!</p>
  
  <p><a href="https://i.stack.imgur.com/DXDA8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DXDA8.png" alt="Screenshot"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" /&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="assets/stylesheets/main.css"&gt;
    &lt;title&gt;Buffalo Wings&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="bw-hero" style='display: flex; align-items: center; justify-content: center'&gt;
      &lt;h1 class='title is-bold' style="color: white"&gt;slider tbd&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
  
      &lt;div class="columns"&gt;
        &lt;div class="column"&gt;
          &lt;img src="assets/images/svg/the_chicken_wings_experts.svg" alt="The chicken wings experts"&gt;
        &lt;/div&gt;
        &lt;div class="column"&gt;
          &lt;h2 class="title has-text-centered"&gt;SELECCIONA TU PAÍS Y CIUDAD&lt;/h2&gt;
          &lt;div class="field is-grouped is-grouped-centered"&gt;
            &lt;div class="control"&gt;
              &lt;div class="select"&gt;
                &lt;select&gt;
                &lt;option&gt;País&lt;/option&gt;
                &lt;option&gt;With options&lt;/option&gt;
              &lt;/select&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="control"&gt;
              &lt;div class="select"&gt;
                &lt;select&gt;
                &lt;option&gt;Ciudad&lt;/option&gt;
                &lt;option&gt;With options&lt;/option&gt;
              &lt;/select&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="field has-text-centered"&gt;
            &lt;input class="is-checkradio" id="saveLocationPreferences" type="checkbox" name="saveLocationPreferences" checked="checked"&gt;
            &lt;label for="saveLocationPreferences"&gt;Recordar mi selección&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>