What I see in your projects is that you don’t understand the Box Model.
Let’s say you have an object width class awesome-box and you set following css properties:
.awesome-box {
width: 300px;
height: 300px;
padding: 10px;
margin: 10px;
border: 10px solid #333;
}
As you can see I’ve set a width and height to 300px which should mean that the box will be of that size. While padding is INSIDE your box (it will reduce the size of text inside your box, but will not resize the box itself) leaving 280px width and height for your text, the border and unfortunatelly are outside of that box. That means that with 10px border your box is currently the size of 320px width and height.
Your elements have 235px which is quarter of the container width. You are using fixed pixel value to determine the 25% while you could have as well use the percentage value. Ok… Now, few of your objects inside the main object have the border property set to 1px. That means that each box will be 2px bigger. With 4 elements it’s already 8px over the container size.
On the other hand I’ve lowered the size of your boxes by 3 pixels and they fit well. That is not a type of behaviour I could’ve expected. I’d suggest @danro to take a look on your case. Please attach a public link here as well (best would be to the first post). Instructions are in the following link:
Good luck :)