The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable.

source

Keeping a website clean (and simplistic) is a design trend, but it also has usability values. There is less noise and users can find stuff more easily.

But adding a max width to your content is primarily good for readability. Just take a look at reddit and you'll notice why line length matters.

There is a reasonable limit in the amount of information the user should see at once. If the view is filled with more information than the user can assimilate/understand it becomes overwhelming.

It is not a matter of leaving empty space, but of using the amount of space needed, not more. This will depend on the kind of content and the way the information is shown.

To use your example:

As websites can make use of scroll, there is no need to put as much information as possible in a single screen.

vs.

As you can notice in smaller screens the need is to show the content occupying the full width of the screen:

There are many reasons, but the main ones are visual cluttering and hierarchy of information on one side, and structural consistency on the UI side.

Visual Cluttering

Clutter is an important phenomenon in our lives, and an important consideration in the design of user interfaces and information visualizations. Many existing visualization systems are designed to reduce clutter by filtering what objects or information the user sees, or using non-linear magnification techniques so that objects in the center of the screen are allowed more display area. Tips for designing web pages, maps, and other visualizations often focus on techniques for displaying a large amount of information while keeping clutter to a minimum through careful choices of representation and organization of that information. [Rosenholtz et al., 2005]

Simply put: the idea is to avoid visual and therefore cognitive overload by presenting elements in a logical way. This logical way is related to teh next point:

Hierarchy of Information

Information has a hierarchy, and it's the most important part of what you want to show. Namely, the difference between failure and success.

The hierarchy of information is a universal design principle that should be used in all forms of design, including e-Learning design. By definition, it is the arrangement of elements or content on a page/screen in such a way that it reveals an order of importance (either ascending or descending).

Take a look at the boxed model below:

As you may see, it's quite clear that the hierarchy is structured and understandable by most people. Please note that in responsive mode this hierarchy will stack all the elements as expected, so the mobile advantage is very clear

Now, the same layout, transformed to full-width:

(try seeing it full size)

Now, hierarchy 1 has gone, and user's eye will probably scan 2 and 3 first. And then 6 and 7! Basically, our most important element is down below the hierarchy. We can change it so the order is something like 3-1-2-4. Then we'll also have issues when stacking on responsive models (not only devices, even screen resizing), because 3 will be the first element, so again, we're creating issues rather than solving problems.

As you can see, the issues are quite big, and these are just the main ones.

But then we also have the UI or layout side:

Structural Consistency

Let's say you have a full width page. No matter what, it will be 100%. 100% for the person on a small laptop and 100% on a 24 inches monitor. It's easy to see that the person on a laptop will see condensed information, with a certain structure that will show not elements in a very specific way with a very specific amount of information in the screen.

Now, the user on that 24 inches monitor will see something extremely different. First of all, chances are the user will feel as in a tennis match, with her head going from one side to the other. Visual saturation will be incredibly high, of course. But the vertical display of information will be different as well. See below:

1366x768

Now 1920x1200 (24 inches monitor)

Quite a difference, huh? Images have been enlarged (and this could be yet another issue!) and text kept his size, almost doubling the amount of text. Now think on this multiplied by the incredible amount of screen sizes that exist, and those that still don't exist and will maybe show up in the next months

In other words: instead of preserving control, we're giving it up in favor of randomness.

Of course, we're talking of general rules, not extremely specific cases, so there will be exceptions here and there

One final note:

I want to make clear that from your examples with full width, only Amazon uses it, and it took them years of testing (there was a very interesting article about this I can't find right now) with countless A/B tests. But here you have hierarchy working: they're selling products where they can't know hierarchy before hand since most products will hold a similar approximated weight , so you'll do your best to match user's search.

As for Google, they use a boxed model and align content to the left with a small gap of white space on the left. LinkedIn main pages are boxed and centered, although it's true the landing page for non logged in users has a full width element. But if you pay close attention, everything else is boxed, even on that page

As a web developer speaking for the sites I've made: we didn't design for large width display. The costs of designing and developing a responsive and scalable website across desktop and mobile are already quite high. Our analytics show that 90%+ of our users view our site in <1400 px wide resolution.

At the end of the day, it's not worth it to spend the time and money designing and implementing for the <10% of users who browse our sites at >1400px wide resolution.

Related: http://webmasters.stackexchange.com/questions/7932/what-is-the-standard-width-for-a-website-in-pixels

That design is easily found and changed using bootstrap, the example is here: http://getbootstrap.com/css/#grid-example-fluid

Simple answer for the UI is that paragraph width is comparable to the amount of unforced movement an eye can make from left to right - also it's comparable to a sheet of paper.

Normally the readable area of a paragraph should be no wider than an average sized hand.

Academic studies on white space

Yes, white space is used to increase readability and reduce visual clutter [1], [2].

The more objects are on the screen the more the eye and the brain has to process [3]. With empty space we reduce the required attentional resources to process the page. However, too much of it can have a negative effect on readability and user satisfaction [4].

Does the whitespace make sites compatible with certain screen sizes?

Not really. If the page has no white space (and is stacked with content), when designing for different resolutions it will become a huge problem how to position all elements of the page for the different resolutions.

Does leaving the space help make sites moblie friendly?

Well not exactly. On mobile resolutions you can notice there is not that much white space. They have different layout structure because of the limited screen space available on mobile phones.

References:

[1] Chaparro B. et al., Reading Online Text: A Comparison of Four White Space Layouts, 2004

[2] Coursaris C. and Kripintris K., Web Aesthetics and Usability: An Empirical Study of the Effects of White Space, 2012

[3] S. Luck and E. Vogel The capacity of visual working memory for features and conjunctions, 1997

[4] Bernard M., Chaparro B., & Thomasson R., Finding Information on the Web: Does the Amount of Whitespace Really Matter?, 2000

If the content is naturally that wide, then by all means make the page wider. So for example, a large table, would be much more usable if it used as much width as it needed, than by being cramped in a narrower column. I have used google docs spreadsheet full screen in the past, and that's useful.

But as others have said though, there's a limit to how long lines of text should be before they get hard to read. It's because it becomes difficult to find the start of the next line as your eye moves back to the left, so text columns should only be so wide.

Another argument for not having wide webpages is that I didn't buy a huge monitor just so I could see more of any one website. As screens get larger people become less likely to maximise windows, so the browser isn't that wide anyhow.

I bought a huge monitor (actually, two huge monitors side by side, and I'd have more if my machine would drive them) so that I could have multiple windows, browsers, editors, etc side by side. That way I don't have to constantly switch between apps, I can just glance from one to the other, which makes things much more efficient. This is likely most true for sites like stackexchange, which are often used in work contexts, where people are working on other things at the same time. It's almost certainly much less important for entertainment sites.

So, as with any usability question, think about the context your users are working in. Is your site the only thing they're looking at, or is it just one part of what they're doing? Can you really be sure of that? Have you logged that info for example?

Even if it is the only thing they're doing, there's still no point in putting things on screen unless they actually serve some purpose. Otherwise they're just noise which detracts from the thing you actually want them to be looking at (or indeed, they want to be looking at). So, if it's genuinely useful then go ahead. But don't just fill space for the sake of it.

I was really surprised to see this question and the interest for the subject. This seems to me to be part of the old debate around the question "Is white space wasted space?"

I think this is a myth and there are a lot of arguments that sustain the idea that white space is the key to successful design.

The most important argument for limit the width of the main block of content and have layout white space is it makes the design more usable and helps users focus on the most important elements. I can tell you from experience I simply leave those websites with so much info in a page that I have that feeling I will never find what I need. It is exhausting to see information all over the screen and I don't understand how I could focus on the middle column with text on the left side and the right side.

I know this is a little subjective, but on the page with a lot the info in the page, I have the feeling the developers didn't want to spend more time to add a button with "more" or synthesize what is important. It feels like a punishment and it feels cheap.

White space helps to:

• focus on the most important content;
• improves reading comprehension;
• create the look and feeling of minimalism and elegance.

In this article, Why White Space Is Crucial To UX Design, I found an interesting opinion:

White space has been proven to increase comprehension up to 20%.(...)

White space helps create mental maps.(...)

The power of white space comes from the limits of human attention and memory

Update: To be more specific, the alternative to having margins on the left and on the right is to have more columns or have a main box with a bigger width.

The problem with the first option is that it is hard to prioritize the important information and with the second one is it is hard to read a text with a big width.

A good argument to limit the width of a column is presented here and this reference is important to be mentioned:

Is there an ideal line length for content?

To quote a passage from “Web Style Guide – Basic design principles for creating web sites”.

The ideal line length for text layout is based on the physiology of the human eye…

At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line. Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width, because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on the page, the reader is easily lost and must hunt for the beginning of the next line. Quantitative studies show that moderate line lengths significantly increase the legibility of text.

Web Style Guide – Basic Design Principles for Creating Website Patrick J. Lynch and Sarah Horton 2nd edition, page 97.

As you can see, there is a ton of whitespace left on both sides of each page.

You're right. There's no good reason for that whitespace. Websites should fill all whitespace with additional ads.