Text not fitting the width of container

Question

This looks like it would be a simple problem but I can't get my head around it. As you can see here, the text uses the width of the container, but when I change the width of the container, the text fits but it looks like this and pushes the sidebar down.

   .container {
        width:1130px;
        margin:0 auto;
    }
    .container.sp_sidebar {
        overflow:hidden;
    }
    #main {
        width:100%;
    } 
    .container.sp_sidebar #main {
        width:770px;
        margin-right:30px;
        float:left;
    }
    #sidebar {
        width:300px;
        float:right;
    }

I've tried to float the container left, and also remove margin 0.

Answer 1

Try putting a space in that monstrous word.

Or add word-break: break-all; (docs) to your CSS.

Answer 2

You need some white spaces to break to another line (as in a common text). Next time, try to use some Lorem Ipsum text as placeholder.