HTML & CSS: Why I cant center a section with in a section I already use margin:0 auto and set it's width?

Question

Here's my html code

<section id="usercontent">
        <h1>Section - User Content</h1>
            <article id="notifications">
                <h1>Notifications</h1>
                <p>Why I can't center this? I already use margin:0 auto;</p>
            </article>
        <article>
            <h1>Article - Left Content</h1>
                <section id="menuform">
                    <h1>User Menus</h1>
                </section>
                <section id="shareform">
                    <h1>Shout to the world</h1>
                    <form method="post">
                    <table>
                        <tr>
                            <td>Shout to the world:</td>
                        </tr>
                        <tr>
                            <td><textarea name="user_post" required="required"></textarea></td>
                        </tr>
                        <tr>
                            <td><input id="btn_share" type="submit" value="Share" name="share"></td>
                        </tr>
                    </table>
                    </form>
                    <?php
                    if(isset($_POST['share'])){

                    }
                    ?>
                </section>
        </article>
        <aside>
            <h1>Aside - Right Content</h1>
        </aside>
        <div id="clearfloats"></div>
    </section>

Here's my css code

/*user content styles*/

/*section styles*/

section#usercontent {
    width:600px;
    background-image:url('../img/content.png');
    font-size:13px;
    color:#323232;
}
section#usercontent h1 {
    visibility:hidden;
    position:absolute;
}

/*clear floats*/

section#usercontent div#clearfloats {
    clear:both;
}

section#usercontent article#notifications {
    width:500px;
    height:20px;
    margin:0 auto;
}

/*article styles*/

section#usercontent article {
    width:220px;
    float:left;
    margin-left:10px;
}
section#usercontent article section#menuform {
    border:1px solid black;
    height:50px;
}
section#usercontent article section#shareform {
    border:1px solid black;
}
section#usercontent article section#shareform table {
    margin:0 auto;
    margin-bottom:8px;
    margin-top:8px;
}
section#usercontent article section#shareform table td {
    padding:2px;
}
section#usercontent article section#shareform input#btn_share {
    border:1px solid #E0BE47;
    border-radius:8px;
    width:58px;height:20px;
    background-color:#FAF5CE;
    cursor:pointer;
    font-size:12px;
    color:#323232;
    float:right;
}
section#usercontent textarea {
    height:55px;
}

/*aside styles*/

section#usercontent aside {
    width:340px;
    float:right;
    margin-right:10px;
}
section#usercontent aside, section#usercontent article {
    margin-top:10px;
    margin-bottom:10px;
    border:1px solid #E0BE47;
    border-radius:8px;
}

Output

I Got problems in this area section#usercontent article#notifications I don't know how to make it center I already use margin:0 auto; Need suggestions to fix this, Thanks!

Answer 1

You can try this:

HTML

<section id="usercontent">
        <h1>Section - User Content</h1>
            <article id="notifications">
                <span>Notifications</span>
                <p>Why I can't center this? I already use margin:0 auto;</p>
            </article>
        <article>
            <h1>Article - Left Content</h1>
                <section id="menuform">
                    <h1>User Menus</h1>
                </section>
                <section id="shareform">
                    <h1>Shout to the world</h1>
                    <form method="post">
                    <table>
                        <tr>
                            <td>Shout to the world:</td>
                        </tr>
                        <tr>
                            <td><textarea name="user_post" required="required"></textarea></td>
                        </tr>
                        <tr>
                            <td><input id="btn_share" type="submit" value="Share" name="share"></td>
                        </tr>
                    </table>
                    </form>
                    <?php
                    if(isset($_POST['share'])){

                    }
                    ?>
                </section>
        </article>
        <aside>
            <h1>Aside - Right Content</h1>
        </aside>
        <div id="clearfloats"></div>
    </section>

CSS

section#usercontent {
    width:600px;
    background-image:url('../img/content.png');
    font-size:13px;
    color:#323232;
}
section#usercontent h1 {
    visibility:hidden;
    position:absolute;
}

/*clear floats*/

section#usercontent div#clearfloats {
    clear:both;
}

section#usercontent article#notifications {
    width:500px;
    height:40px;
    text-align:center;
}

/*article styles*/

section#usercontent article {
    width:220px;
    margin-left:30px;
}
section#usercontent article section#menuform {
    border:1px solid black;
    height:50px;
}
section#usercontent article section#shareform {
    border:1px solid black;
}
section#usercontent article section#shareform table {
    margin:0 auto;
    margin-bottom:8px;
    margin-top:8px;
}
section#usercontent article section#shareform table td {
    padding:2px;
}
section#usercontent article section#shareform input#btn_share {
    border:1px solid #E0BE47;
    border-radius:8px;
    width:58px;height:20px;
    background-color:#FAF5CE;
    cursor:pointer;
    font-size:12px;
    color:#323232;
    float:right;
}
section#usercontent textarea {
    height:55px;
}

/*aside styles*/

section#usercontent aside {
    width:340px;
    float:right;
    margin-right:10px;
}
section#usercontent aside, section#usercontent article {
    margin-top:10px;
    margin-bottom:10px;
    border:1px solid #E0BE47;
    border-radius:8px;
}

JSFIDDLE LINK GOES HERE

Answer 2

You are using float: left; on article. Add float: none; to "section#usercontent article#notifications" or remove float left from "section#usercontent article".