It looks good, it works well in many resolutions and it's easy to style, structure and code. Lots of qualifiers on those statements, but those are the reasons you'll hear.
However there are several ways to achieve this, and some adapt to different resolutions well, some don't. What you're talking about in CNN.com is an elastic design, and problem you're seeing is that it is thus in part a fixed width design, so that if the window shrinks too much there is no reorganizing or restyling of elements.
To be technical briefly, the effect you see is because their CSS is using margin:auto on their container which automatically adds margins to the left and right of your content to keep it centered, but they are using a fixed width for their container element so that if the screen shrinks beyond the automatic margin the content will remain the same width, forcing you to scroll to see it all.
The reason you want to keep things centered is if your design is too small for a user's screen size, it might look ridiculous cramped in the left (or right) side of the screen. CNN's solution gracefully fixes this problem by keeping an automatic margin on both sides of their content to keep it centered. The flaw, as you've noted, is that it does not shrink gracefully because of the fixed width of the content.
The "in" solution is either a Fluid design, as you can see in this example. Ideally your Smashing Magazine provides some background and suggestions on Fluid vs Fixed vs Elastic design.
A problem with their examples is they fall prey to the same problem as CNN.com, and they don't remove or reorder elements to suit small screens. When it comes to supporting mobile users, some elements like that giant side bar might just have to go; this is responsive design. It's a lot more complicated, but it allows you to design a single site for both mobile and desktop browsers.
For a simple example of a responsive design, see this related article from 456breakstreet.com. Resize the page until there is no remaining room for the right column. It disappears! It's actually been moved to the bottom of the page, however if you feel a sidebar or such is no longer needed, you can simply hide it when screen space is too tight.
Boston Globe's website does this as well, a bit....zealously, to say the least. A problem with Boston Globe's solution is the font and white space change so drastically between sizes, however this isn't as noticable when the browser is staying at a single width or changing rarely.
This type of trick allows you to design a site with as many sidebars, footers, headers, leggers and armers as you want, and you can strategically dismember those elements that are not absolutely necessary as the screen size shrinks. On mobile your user probably just wants to view only the content, why waste pixels they don't have on a sidebar?
