How to center a div with varying screen sizes?

Question

I have a set of <div>s lineup horizontally in my container and I'm looking to center my Outer-Container <div> class with the rest of the code on my web page (Squarespace).

I've made a CodePen re-creating the page and I still can't seem to center my outer-container within the Main-content section with varying screen sizes.

Any help is greatly appreciated!

<section class="Main-content" data-content-field="main-content" id="yui_3_17_2_2_1507859188217_558">
<div class="sqs-layout sqs-grid-12 columns-12 sqs-frontend-overlay-editor-widget-host" data-type="page" data-updated-on="1507857777989" id="page-59cab354bebafb4216478596">
    <div class="row sqs-row" id="yui_3_17_2_2_1507859188217_669">
        <div class="col sqs-col-12 span-12" id="yui_3_17_2_2_1507859188217_668">
            <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_22_1507595367220_25824">
                <div class="sqs-block-content">
                    <h1 align="center">Choose your subscription plan</h1>
                </div>
            </div>
            <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_12_1507852892558_4858">
                <div class="sqs-block-content">
                    <h3 style="text-align:center;color:#0083f5;">Have a MyDietGoal Promotion Code?</h3>
                </div>
            </div>
            <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_2_1507522278297_5479">
                <div class="sqs-block-content">



                    <div class="outer-container" id="backgroundDiv" style="width: max-content; height: max-content; padding: 100px;">

                        <div class="container container1">
                            <div class="w-table">
                                <div class="w-table-cell">
                                    <div class="w-container">
                                        <div class="w-card color-green">

                                            <div class="card-header">
                                                <div class="w-title" style="cursor:default">
                                                    <h2><font size="7px">Novice</font></h2>
                                                </div>
                                                <div class="w-price" style="cursor:default">
                                                    $4.99
                                                    <h3>/ Week</h3>
                                                </div>
                                                <div class="container-button">
                                                    <a class="w-button" id="btn1" href="/meal-planner" target="_blank">Sign up </a>
                                                </div>
                                            </div>

                                            <div class="card-content" style="cursor:default">
                                                <div class="w-item" style="cursor:default">
                                                    <span>Weekly </span>Meal Plans
                                                </div>
                                                <div class="w-item" style="cursor:default">
                                                    <span>Personal </span>Dietary Assessment and Advice
                                                </div>
                                                <div class="w-item" style="cursor:default">
                                                    <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="container container2">
                            <div class="w-table">
                                <div class="w-table-cell">
                                    <div class="w-container">
                                        <div class="w-card color-blue">

                                            <div class="card-header">
                                                <div class="w-title" style="cursor:default">
                                                    <h2><font size="7px">Apprentice</font></h2>
                                                </div>
                                                <div class="w-price" style="cursor:default">
                                                    $9.99
                                                    <h3>/ Week</h3>
                                                </div>
                                                <div class="container-button">
                                                    <a class="w-button" id="btn2" href="/meal-planner" target="_blank">Sign up </a>
                                                </div>
                                            </div>

                                            <div class="card-content" style="cursor:default">
                                                <div class="w-item" style="cursor:default">
                                                    <span>Weekly </span>Meal Plans
                                                </div>
                                                <div class="w-item" style="cursor:default">
                                                    <span>Personal </span>Dietary Assessment and Advice
                                                </div>
                                                <div class="w-item" style="cursor:default">
                                                    <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="container container3">
                            <div class="w-table">
                                <div class="w-table-cell">
                                    <div class="w-container">
                                        <div class="w-card color-orange">

                                            <div class="card-header">
                                                <div class="w-title" style="cursor:default">
                                                    <h2><font size="7px">Advanced</font></h2>
                                                </div>
                                                <div class="w-price" style="cursor:default">
                                                    $14.99
                                                    <h3>/ Week</h3>
                                                </div>
                                                <div class="container-button">
                                                    <a class="w-button" id="btn3" href="/meal-planner" target="_blank">Sign up </a>
                                                </div>
                                            </div>

                                            <div class="card-content" style="cursor:default">
                                                <div class="w-item" style="cursor:default">
                                                    <span>Weekly </span>Meal Plans
                                                </div>
                                                <div class="w-item" style="cursor:default">
                                                    <span>Personal </span>Dietary Assessment and Advice
                                                </div>
                                                <div class="w-item" style="cursor:default">
                                                    <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

How to center content with a dynamic size, inside a parent with a dynamic size, along both axes: https://stackoverflow.com/questions/6464592/how-to-align-entire-html-body-to-the-center/35047036#35047036 — Gershy, Oct 13 '17 at 02:19
It works perfectly fine on the Pen but not on my site! Looking into it — Christopher Karam, Oct 13 '17 at 02:31

score 0 · Accepted Answer · answered Oct 13 '17 at 03:12

0

I visited your web page and inspected the page source. It seems like the padding: 100px in .outer-container is breaking the display. You have to add negative left margin like margin-left: -100px to reposition your div.

Anyway, you may want to refactor your code and move the image to a bigger parent div then apply the padding there.

answered Oct 13 '17 at 03:12

Cons7an7ine

658
6
17

Wow. That's what solved it. I managed to fix part of it by making sure the content's width was at 100% (previously 76.6666%). But it still wasn't completely centered. And yes I had to add the negative margin to accommodate the image padding. I would eventually have to refactor my code since my workaround to my last issue was inserting css through JS. Regardless, thank you for the input. Really appreciate it! – Christopher Karam Oct 13 '17 at 03:22

How to center a div with varying screen sizes?

1 Answers1