Needs some help horizontally centering div using the w3.css bootstrap

[Handler]

Hello!

 

http://handlersspot.net/test/iface1

 

The card right after the paragraph that says "Important Dates input" I'm having a really hard time getting that to be centered horizontally.

 

I've done all the parlor tricks I know and it never budged. =\

 

So any help at this point would be great!

 

Thanks!

Dave

[Ingolme]

Remove w3-card-4 and w3-half classes from the element.

Give it its own class name, such as "important-dates" and then apply some CSS to that.

.important-dates {
    margin: 0 auto;
    max-width: 860px;
}

[Handler]

 

Remove w3-card-4 and w3-half classes from the element.

Give it its own class name, such as "important-dates" and then apply some CSS to that.

.important-dates {
    margin: 0 auto;
    max-width: 860px;
}

 

Thanks man!

 

I actually used what you gave me but ended up only removing the w3-half. While I like the w3.css thing for it's simplicity of use it lacks in areas of centering.

[dsonesuk]

Is this the layout you required?

<div class="w3-card-4 w3-margin">            
  <div class="w3-container w3-amber">
                <h2>Important Dates Input</h2>
            </div>
        <div class="w3-container">

<!--form content here-->

</div>
</div>

Its is difficult to tell if you want blue form background? but since it would hide blue text I assumed it was not.