The Columns property does not align correctly

Question

I am trying to create a three-column layout for my site. When I use the column property and set it to the "3" columns, it does not align correctly. It seems that each column after the previous one seems a little pushed. Is there any way to fix this? It does the same when I set the column to column “5” and minimize the window

.widget-column { columns: 5em 3; /* Test with 5 columns */ -moz-columns: 5em 3; /* Test with 5 columns */ -webkit-columns: 5em 3; /* Test with 5 columns */ } .widget-column p { padding: 1em; } 

 <div class="widget-column"> <p>Column</p> <p>Column</p> <p>Column</p> <p>Column</p> <p>Column</p> </div> 

Jsfiddle

Answer 1

Since <p> is a block level element, it adds a new line both before and after the element. But you can do it as an inline block level by setting display:inline-block; plus width:100%; to expand the width.

 * { margin: 0; padding: 0; } .widget-column { margin: 10px; text-align: center; columns: 5em 3; -o-columns: 5em 3; -ms-columns: 5em 3; -moz-columns: 5em 3; -webkit-columns: 5em 3; column-gap: 0px; -o-column-gap: 0px; -ms-column-gap: 0px; -moz-column-gap: 0px; -webkit-column-gap: 0px; } .widget-column p { background: #EEE; padding: 1em; display: inline-block; width: 100%; } 

 <div class="widget-column"> <p>Column</p> <p>Column</p> <p>Column</p> <p>Column</p> <p>Column</p> </div> 

Answer 2

 You have to use <span> in case of <p> tag, <p> tag by default starts from next line 

Here is the plnk:

http://plnkr.co/edit/n4TlD6nVSqOa9U5F2PON?p=preview