画面サイズを変えてdivをどのように配置するのですか？

Question

コンテナ内に<div>のラインナップが水平に並んでいて、外側のコンテナ<div>クラスを残りのコードと一緒にセンター（Squarespace）に配置したいと考えています。

CodePen私はページを再作成しましたが、セクションの中に私のouter-containerの画面をさまざまなサイズで中央に置くことはできません。

ご協力いただきありがとうございます。

<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> 

Answer 1

私はあなたのウェブページを訪問し、ページソースを検査しました。 .outer-containerのpadding: 100pxが表示を破っているようです。 divの位置を変更するには、margin-left: -100pxのような負の左マージンを追加する必要があります。

とにかく、あなたのコードをリファクタリングして、画像を大きな親に移動させたい場合は、divを入力し、そこでパディングを適用してください。