Max-Width in CSS not working

Question

Okay, so I haven't been able to find a solution to this problem. I am using wordpress to make a website and am trying to implement a max-width for the site. My style.css is

Edit: The issue is the text runs off the end of the page, it does not break at all.

body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
}

a:link,
a:visited {
    color: #006ec3;
}

p {
    line-height: 1.65em;
}

/* General Layout */
div.container {
    max-width: 920px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

The container is being implemented on the site, because it responds to changing of the left padding, but not the right.

Also editting the max-width value shifts the body of the text to the right.

Answer 1

The problem is "margin: 0 auto". Remove this or modify it and it works. margin: 0 auto is basically centering the content, not pushing anything to the right. jsfiddle

div.container {
max-width: 500px;
padding: 0 20px 0 20px;
margin: 0;

}

Answer 2

Don't forget:

overflow: hidden;

Then you can define the rules of break lines, ellipsis etc. according to your need:

word-break, white-space, etc.