分区不会中锋？

Question

这是我目前的布局：

它看起来居中，但当我缩小时会发生这种情况：

我觉得这可能与我的宽度有关，但我不确定。

以下是代码：

HTML

<div class="shopwrap">
   <div id="recentShop">
      <h1>STORE</h1>
      <div id="825221" class="section sectionMainTwo recentShop">
         <div class="primaryContent ">
            <div class="subHeading">
               <div style="float: right; white-space: nowrap;">
                  <a style="display: inline-block;padding-top: 7px;" href="#"><span title="Aug 25, 2016 at 8:27 PM" class="DateTime">mhm</span></a>
               </div>
               <h2>Test</h2>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="newswrap">
<div id="recentNews">
   <h1>NEWS</h1>
   <div id="825221" class="section sectionMain recentNews">
      <div class="primaryContent ">
         <div class="subHeading">
            <div style="float: right; white-space: nowrap;">
               <a style="display: inline-block;padding-top: 7px;" href="#"><span title="Aug 25, 2016 at 8:27 PM" class="DateTime">Aug 25, 2016</span></a>
            </div>
            <h2>CommandPlot is the new jam!</h2>
         </div>
         <div class="messageContent baseHtml">
            <div class="postedBy">
            </div>
            by <a href="#">LordBarkingson</a> - <b>10/09/16</b></span>
         </div>
         <div class="newsText">
            <div style="text-align: center">&#8203;</div>
            <br>
            Hello!<br>
         </div>
      </div>
   </div>
</div>

CSS

.sectionMain {
    background-color: rgb(250, 250, 250);
    padding: 8px;
    border: 1px solid rgb(226, 226, 226);
    border-radius: 4px;
    width:900px;
    position:relative;
    bottom:50px;
        margin:0!important;
    right: 300px;

}


    .newswrap {
        margin:0!important;
        position:relative;
        left:25%;
        bottom: 100px;

    }




    .recentNews h2, .recentNews {
        color:#333;
        font-family:Arial;
    }


    .recentNews a {
        color:#4C697C;
        font-family:arial;
        text-decoration:none;
    }

    .recentNews {
            border-top:50px solid #4C697C;

    }


    #recentNews img {
        width:100%;
    }

    #recentNews h1 {
        color:#fff;
        font-family:Arial;
        position:relative;
        top:3px;
        left: -280px;
        font-size:20px;
        z-index:9999;
        text-transform:capitalize;
    }


    #recentShop h1 {
            color:#fff;
        font-family:Arial;
        position:relative;
        top:217px;
        left: 775px;
        font-size:20px;
        z-index:9999;
        text-transform:capitalize;    
    }



        .Shopwrap {
        margin:0!important;
        position:relative;
        left:25%;
        bottom: 100px;
    }




    .recentShop h2, .recentShop {
        color:#333;
        font-family:Arial;
    }


    .recentShop a {
        color:#4C697C;
        font-family:arial;
        text-decoration:none;
    }

    .recentShop {
            border-top:50px solid #4C697C!important;

    }


    #recentShop img {
        width:100%;
    }

.sectionMainTwo {
    background-color: rgb(250, 250, 250);
    padding: 8px;
    border: 1px solid rgb(226, 226, 226);
    border-radius: 4px;
    width:300px;
    display:inline-block;
    position:relative;
    bottom:-165px;
        margin:0!important;
    left: 750px;

}

Answer 1

使用

margin: 0 auto;

以div为中心。希望这有帮助