How do I remove the first empty column in a CSS grid?

Question

I\'ve got an empty column at the start and can\'t work out why?

Answer 1

I don't think it's an extra column.

It looks like the default margin or padding added by browsers to list elements.

Check the default styles on your ul.

Also see this W3C default style sheet sample:

Add this to your code:

ul {
   margin: 0;
   padding: 0;
}

Answer 2

It's because of Clearfix class you've used on ul element. Clearfix adds :before and :after as a children, therefore CSS Grid consider them as items.

Remove the clearfix and handle it with following style:

float: left;
width: 100%

Answer 3

.clearfix will probably be throwing in a ::before and possible an ::after with display table et all which does not play well with grid layout so..

css:

/* position absolute breaks it free and clear from the grid layout */
ul.inrpager.clearfix::before {
  position:absolute; 
}

ul.inrpager.clearfix::after {
  position:absolute; 
}