2 columns li inside ul, wont fill 100% of the ul width

Question

I can't get UL's li elements to fill 100% of the width (or near).

Something strange happens, because the first one is next to parent's boreder, but the second column, has like a 20 px offset from the right parent's border.

.latest-posts .latest-posts-widget ul {
    border: solid 1px;
}

.latest-posts .latest-posts-widget ul li {
    display: inline-block;
    width: 49%;
    border: solid 1px;
}

It is affected by Bootstrap 3

Also I have to use 49% because 50% wont make 2 columns

Live page is under development in [www.hugotrinchero.com.ar][2]

Answer 1

Since you're dealing with inline-block elements, you need to set font-size to 0 for the parent element, in order to remove whitespace gaps.
(Reset than font-size for the children elements).

Now, three ways to do it:

Solution 1 box-sizing: border-box;

*{margin:0;padding:0;}

.latest-posts .latest-posts-widget ul {
  border: #000 solid 1px;
  font-size:0;
}

.latest-posts .latest-posts-widget ul li {
  font-size: 16px; /* or use 1rem; for Root em */
  display: inline-block;
  vertical-align:top;
  box-sizing: border-box;  /* Will eliminate the border wrap issue */
  width: 50%;
  border: #000 solid 1px;
}

<div class="latest-posts">
  <div class="latest-posts-widget">
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa numquam earum error provident et. A quibusdam laboriosam voluptates quae sunt ducimus amet nisi, commodi, corporis totam distinctio recusandae, porro.</li>
      <li>Beatae nulla iure enim illo assumenda doloribus quasi sit delectus molestias ut nam aut corrupti ea laborum unde consectetur rem maxime velit esse a quis sunt, asperiores veniam. Qui, sunt?</li>
      <li>Amet eius vitae ratione numquam, recusandae at sunt, quia eaque temporibus non excepturi sed perferendis perspiciatis, ducimus est, quasi harum? Laboriosam consequatur harum eius, repellat quaerat ratione natus quos commodi.</li>
      <li>Delectus cumque repellat, tempore in vitae, libero illum? Maiores itaque, facilis quas hic, aliquam modi corporis atque pariatur repellat enim! Qui dignissimos quia perferendis rerum, at quis mollitia aut quos.</li>
    </ul>
  </div>
</div>

Solution 2 calc(50% - 2px)

Using calc() and font-size:0; to remove whitespace gaps.
In 50% - 2px the 2px accounts for the 1px + 1px borders:

*{margin:0;padding:0;}

.latest-posts .latest-posts-widget ul {
  border: #000 solid 1px;
  font-size:0;
}

.latest-posts .latest-posts-widget ul li {
  display: inline-block;
  vertical-align:top;
  font-size: 1rem; /* Root-EM to fight parent's 0 */
  width: calc(50% - 2px);
  border: #000 solid 1px;
}

<div class="latest-posts">
  <div class="latest-posts-widget">
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa numquam earum error provident et. A quibusdam laboriosam voluptates quae sunt ducimus amet nisi, commodi, corporis totam distinctio recusandae, porro.</li>
      <li>Beatae nulla iure enim illo assumenda doloribus quasi sit delectus molestias ut nam aut corrupti ea laborum unde consectetur rem maxime velit esse a quis sunt, asperiores veniam. Qui, sunt?</li>
      <li>Amet eius vitae ratione numquam, recusandae at sunt, quia eaque temporibus non excepturi sed perferendis perspiciatis, ducimus est, quasi harum? Laboriosam consequatur harum eius, repellat quaerat ratione natus quos commodi.</li>
      <li>Delectus cumque repellat, tempore in vitae, libero illum? Maiores itaque, facilis quas hic, aliquam modi corporis atque pariatur repellat enim! Qui dignissimos quia perferendis rerum, at quis mollitia aut quos.</li>
    </ul>
  </div>
</div>

Solution 3 box-shadow: inset

Simply use 50% and instead of the problematic border use box-shadow:

*{margin:0; padding:0;}

.latest-posts .latest-posts-widget ul {
  border:    solid 1px;
  font-size:  0;
}

.latest-posts .latest-posts-widget ul li {
  font-size:  16px;
  display:    inline-block;
  vertical-align: top;
  width:      50%;
  box-shadow: inset 0 0 0 1px #000;
}

<div class="latest-posts">
  <div class="latest-posts-widget">
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa numquam earum error provident et. A quibusdam laboriosam voluptates quae sunt ducimus amet nisi, commodi, corporis totam distinctio recusandae, porro.</li>
      <li>Beatae nulla iure enim illo assumenda doloribus quasi sit delectus molestias ut nam aut corrupti ea laborum unde consectetur rem maxime velit esse a quis sunt, asperiores veniam. Qui, sunt?</li>
      <li>Amet eius vitae ratione numquam, recusandae at sunt, quia eaque temporibus non excepturi sed perferendis perspiciatis, ducimus est, quasi harum? Laboriosam consequatur harum eius, repellat quaerat ratione natus quos commodi.</li>
      <li>Delectus cumque repellat, tempore in vitae, libero illum? Maiores itaque, facilis quas hic, aliquam modi corporis atque pariatur repellat enim! Qui dignissimos quia perferendis rerum, at quis mollitia aut quos.</li>
    </ul>
  </div>
</div>