Need to put text into 2 columns with Bootstrap?
<p>I am new to Bootstrap and am having trouble modifying CSS in accordance with what I need to achieve. Basically I need 8 bullet points where the bullet is an awesome fonts icon, and the text is of varying lengths. I ned 4 bullets on left, 4 on right like this ideally:</p>

<p><a href="https://i.stack.imgur.com/5wZKd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5wZKd.png" alt="enter image description here"></a></p>

<p>I looked through eh Bootstrap.css file I have and have created this since <code>col-lg-6 and .col-md-6</code> both had widths of 50%, meaning they should occupy 2 columns. </p>

<pre><code>&lt;div class="container"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-lg-6 .col-md-6 text-left"&gt;
                    &lt;div class="service-box"&gt;
                        &lt;i class="fa fa-2x fa-diamond text-primary sr-icons"&gt;&lt;/i&gt;
                        &lt;h3 class = "listPerson"&gt;Infrastructure &amp; Data Center Managers&lt;/h3&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-lg-6 .col-md-6 text-left"&gt;
                    &lt;div class="service-box"&gt;
                        &lt;i class="fa fa-2x fa-diamond text-primary sr-icons"&gt;&lt;/i&gt;
                        &lt;h3 class = "listPerson"&gt;Network Administrators &amp; Engineers&lt;/h3&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
               &lt;div class="col-lg-6 .col-md-6 text-left"&gt;
                    &lt;div class="service-box"&gt;
                        &lt;i class="fa fa-2x fa-diamond text-primary sr-icons"&gt;&lt;/i&gt;
                        &lt;h3 class = "listPerson"&gt;Architects&lt;/h3&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-lg-6 .col-md-6 text-left"&gt;
                    &lt;div class="service-box"&gt;
                        &lt;i class="fa fa-2x fa-diamond text-primary sr-icons"&gt;&lt;/i&gt;
                        &lt;h3 class = "listPerson"&gt;IT Directors &amp; Managers&lt;/h3&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-lg-6 .col-md-6 text-left"&gt;
                    &lt;div class="service-box"&gt;
                        &lt;i class="fa fa-2x fa-diamond text-primary sr-icons"&gt;&lt;/i&gt;
                        &lt;h3 class = "listPerson"&gt;IT Operation Directors &amp; Managers&lt;/h3&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-lg-6 .col-md-6 text-left"&gt;
                    &lt;div class="service-box"&gt;
                        &lt;i class="fa fa-2x fa-diamond text-primary sr-icons"&gt;&lt;/i&gt;
                        &lt;h3 class = "listPerson"&gt;Virtual Server Administrators Systems Administrators&lt;/h3&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                 &lt;div class="col-lg-6 .col-md-6 text-left"&gt;
                    &lt;div class="service-box"&gt;
                        &lt;i class="fa fa-2x fa-diamond text-primary sr-icons"&gt;&lt;/i&gt;
                        &lt;h3 class = "listPerson"&gt;Desktop Managers&lt;/h3&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-lg-6 .col-md-6 text-left"&gt;
                    &lt;div class="service-box"&gt;
                        &lt;i class="fa fa-2x fa-diamond text-primary sr-icons"&gt;&lt;/i&gt;
                        &lt;h3 class = "listPerson"&gt;Application Managers, Administrators &amp; Developers&lt;/h3&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
</code></pre>

<p>This achieves this:</p>

<p><a href="https://i.stack.imgur.com/e6L4m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e6L4m.png" alt="enter image description here"></a></p>

<p>And this is close but you can see there is too much spacing between first and second column. This happens because since I have different lengths of text I had to set the max-width here, which pushes the 2nd column off Im thinking. Here is full CSS:</p>

<pre><code>    .listPerson {
        display: inline-block;
        margin-left: 15px;
        font-family: 'proximanova-reg';
        font-size: 20px;
    }

.service-box {
  max-width: 490px;
  margin-right: 0px;
}
.col-lg-6 {
    width: 50%;
  }
.col-md-6 {
    width: 50%; /*Both cols have float: left also*/
  }
.row {
  margin-right: -15px;
  margin-left: -15px;
    margin-top: 45px;
}
</code></pre>

<p>Why is my first column so far to the left even if the text does not extend that far? I have tried setting padding-left and margin-left to 0px on the service-box and other selectors but nothing is working. </p>

<p>How can I fix this?</p>