W3CSS: fluid layout to center the page?

Question

I use the W3CSS to build a responsive site. To center the page I thought, I'd use the 12-column system they provide. So I did something like this:

<div class="w3-container">
    <div class="w3-row">
        <div class="w3-col m2 l3 w3-container w3-blue"></div>
        <div class="w3-col m8 l6 w3-container w3-white">
            <p>
                Hello world!
                <br>
                <br>
                Let's do this.
                <br>
                <br>
                A lot of fun...
            </p>
        </div> <!-- Content Column -->
    <div class="w3-col m2 l3 w3-container w3-red"></div>
    </div> <!-- Content Container Row -->
</div> <!-- Page Container -->

I had to assign the class w3-container to the w3-col. Otherwise the layout wouldn't work. The downside of adding w3-container is, that the w3-color-classes won't apply anymore. This is exactly my problem: I want the two divs surrounding the content-div to be have a certain color. But the background-color won't apply. Neither by adding the w3-class nor by adding it manually via CSS.

Here's the whole JSFiddle: https://jsfiddle.net/timothys_monster/kp445w0u/10/

Answer 1

You need to use .w3-content class for a selected parent element and then you should set max-width for it like 1200px or so. Inside of it you can use your 12-column grid as wanted. Check here