Remove extra padding from CSS3 multi-column elements, how?

I'm trying to create a layout layout using multi-column CSS3 but am having some problems. In the last paragraph, there is an additional padding that pushes the bottom element below the bottom one. I want to remove this extra bottom padding so that the multi-column element has a narrower bottom padding to the element below it. Here's the bottom addition that I want to remove.

This is a picture of my problem:

here's the markup.

<div class="span8" id="content-wrapper">

  <div class="content" id="container">
    <article class="item"> ... </article>
    <article class="item"> ... </article>
    <article class="item"> ... </article>
    <article class="item"> ... </article>
  </div>

  <nav class="pagination loop-pagination">
    <a class="prev page-numbers" href="#">Previous</a>
    <a class="page-numbers" href="#">1</a>
    <span class="page-numbers current">2</span>
    <a class="page-numbers" href="#">3</a>
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="#">5</a>
    <a class="next page-numbers" href="#">Next</a>
  </nav>

</div>

.content {
    overflow: hidden;
    column-count: 2;
    -webkit-column-count: 2;
    column-gap: 25px;
    -webkit-column-gap: 25px;
    column-fill: auto;
    -webkit-column-fill: auto;
}
.item {
    margin-bottom: 3em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    break-inside: avoid;
}

      

        
        
        
      

    

And here's the JSFiddle . Can this be done? thank.

Edit:

If possible, I want to keep the break-inside inside: avoid;, the content was cut off if the deleted column inside is deleted.

http://imgur.com/RRrST41

Also, depending on the size of the content, the additional bottom padding varies in size. All I want is to make it behave like jQuery Freemasonry.

Thank.