Bootstrap - how to prevent columns overlapping

Question

I have a table and text, and they overlap. If I switch the column size to lg, i.e. class="col-xs-6", then the text collapses underneath. However, I would like them side by side until the browser doesn't allow, and then collapse.

The code is pretty straightforward:

<div class="row " style="background-color:#f5fcff; border-radius:15px; margin-left:25px; margin-top:35px">
        <div class="col-xs-6"  >
          <div style="padding-top:25px">
            This table contains a list of users and how many times they've looked at a product's page (user):
          </div>
            <table class="table table-hover" style="text-align:center">
              <thead>
                <tr>
                  <th>User ID</th>
                  <th>14CBL13W</th>
                  <th>18VAEA35W</th>
                  <th>14CBL15Y</th>
                  <th>14DAEA12W</th>
                  <th>14OM6DY</th>
                  <th>...</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>234234</td>
                  <td>0</td>
                  <td>0</td>
                  <td>15</td>
                  <td>3</td>
                  <td>0</td>
                  <td>...</td>
                </tr>
                ...                  
              </tbody>
            </table>
          </div>
          <div class="col-xs-6" style="padding-left:35px; padding-top:75px" >
            In this example, a new user 96887, which has looked at '14DAEA12W'. The value of '14DAEA12W' has now changed from 0 to 1. Now, which item would recommend that the user might like? If you answered '14CBL15Y' then you are correct. This is because user data is showing that there is a high amount of correlation between the two. However, this may also be part of a feedback loop - the more the item is recommended, the higher the chance that its value in this chart goes up. This chart also overlooks any item characteristic similarities, it only looks at user behavior. 
          </div>
      </div>

Answer 1

EDIT1: Bootstrap will look nice again if you enumerate your divs as an unordered list (such as below). If you run this in jsfiddle.net it won't quite look the way you intended. If you want it to not overlap and stay in the same row, try to give it more space by shortening the table or making the list run horizontally. As for now, col-xs-1 might look good

<div class="row " style="background-color:#f5fcff; border-radius:15px; margin-left:25px; margin-top:35px">
    <ul style="list-style-type:none">
        <li>
        <div class="col-xs-6" >
          <div style="padding-top:25px">
            This table contains a list of users and how many times they've looked at a product's page (user):
          </div>
        </li>
          <li>
            <table class="table table-hover" style="text-align:center">
              <thead>
                <tr>
                  <th>User ID</th>
                  <th>14CBL13W</th>
                  <th>18VAEA35W</th>
                  <th>14CBL15Y</th>
                  <th>14DAEA12W</th>
                  <th>14OM6DY</th>
                  <th>...</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>234234</td>
                  <td>0</td>
                  <td>0</td>
                  <td>15</td>
                  <td>3</td>
                  <td>0</td>
                  <td>...</td>
                </tr>
                ...                  
              </tbody>
            </table>
          </div>
        </li>
        <li>
          <div class="col-xs-6" style="padding-left:35px; padding-top:75px" >
            In this example, a new user 96887, which has looked at '14DAEA12W'. The value of '14DAEA12W' has now changed from 0 to 1. Now, which item would recommend that the user might like? If you answered '14CBL15Y' then you are correct. This is because user data is showing that there is a high amount of correlation between the two. However, this may also be part of a feedback loop - the more the item is recommended, the higher the chance that its value in this chart goes up. This chart also overlooks any item characteristic similarities, it only looks at user behavior. 
          </div>
        </li>
      </div>

    </ul

>

Answer 2

You're missing the <div class="container"></div>, put your block inside one.