Weird layout on post page

Since you’re using the ‘content-box’ box sizing, the width of the element does not include the borders and padding. So the padding you’ve added to the elements increases the overall width of the element, making it so that 3 cannot fit side by side.

Add this to your theme’s style.css file:

.content .post, .content .entry {
box-sizing: border-box;
}

Hello – I’ve added the code to my css but it did not change anything to the problem.

I went and copied your code on column-class-generator. I can fit the 3 collumns on the same row when I play with the

.one-third,
.two-sixths {
width: 31.764705882353%;
}

I need to enter 29….. in order to fit but when I check on my tablet, it’s not making it.

I’m not sure on where I’m going!

It looks like you’re also defining a margin on it, which is overriding the margin added by the column classes.

Remove the margins from .content .post, .content .entry

If you want you can add a top and bottom margin, but do not add left and right margins.

just what I did and also added box-sizing:border-box; to the one-third class so it fits in all medium.

Many thanks for your help.