Question

On my test site – http://dev.nerdysyntax.com/index.html – I am trying to float three columns towards the bottom of this page under “what can I do for you.” The columns seem to be having a padding or margin problem. No matter which width I change or the number I change the margin-right or padding-right, the third column seems to fall to the next line before it completely pushes right.

As you can see in on the page, there is a lot of space from the end of the third column to the end of my page width. Tried different things, but can’t figure out the issue. Can anyone see the problem?

Answer 1

Try this :

.item {
    float: left;
    font-size: 18px;
    margin: 15px 0 0 48px;
    width: 30%;
}

.item:first-child {
    margin: 15px 0 0 0;
}

Edit

When you say breaks, I take it you mean last .item drops down a level. This is because your parent container has a fixed width, the children elements combined must not exceed it.

When floating : real width = width + padding + margin