css - ブラウザを最大化するとテキストの配置に影響する

Question

どこにも解決策を見つけることができなかったという問題があります。誰かがここで私を助けてくれたら、本当に感謝しています。

このページには、ページの下のセクションにスクロールする 3 つのリンクがあります。各セクションには、3 行の白いテキストといくつかの矢印のグラフィックが並んでいます。ブラウザが最大化されて画面全体に表示されるまでは問題ありません。その結果、白いテキストと円のグラフィック内のメインの黒い見出しが約 10 ピクセルずれます。

なぜこのようなことが起こっているのか理解できず、本当に困惑しています。問題のテスト サイトとページへのリンクを次に示します。 http://surefireresearchtestsite.businesscatalyst.com/ourApproach.html

HTML

<div class="bgImageOverTop">

    <div class="wrapperTwo">

    <div  class="ourApproach ">  

        <div class="feedsBox " id="scopeControl">

        <h3 id="scope">Scope</h3>
        <div class="scopeFeedsBox">
            <ul>
                <li>Your Business</li>
                <li>Your Marketing Goals</li>
                <li>The Competitive Market</li>                   
            </ul>                                   
        </div>               
       </div>

    <div class="feedsBox" id="strategyControl">
    <!-- similar thing happening here -->               
    </div>


    <div class="feedsBox" id="executeControl">                   
    <!-- similar thing happening here -->               
    </div>

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

CSS

.bgImageOverTop{
    width:100%;
    height:3000px;
    background: url("../images/midSection-Approach.png") 50% 50% no-repeat;   
    background-size: cover;
    position:relative;
    z-index:50;
}
.wrapperTwo{
    width:886px;
    padding-left:33px;
    padding-right:33px;
    margin:auto;
    height:2950px;
    position:relative;
    top:0px;
    z-index:1500;
}

.ourApproach{
    float:left;
    text-align:center;
    font-family: 'rudaregular';
    height:auto;
    margin-top:130px;   
    padding:0 10px 0px 10px;
    position:relative;
    z-index:1500;
}
.feedsBox{
    width:auto;
    height:auto;
    position:relative;
    z-index:50;
}
#scopeControl{
    position:relative;
    top:432px;
    left:263px;
}
#scope{
    position:relative;
    top:0px;
}
.scopeFeedsBox{
    width:210px;
    height:auto;
    line-height:1em;
    position:relative;
    top:-70px;
    left:270px;
}
.scopeFeedsBox ul{
    float:left;
    list-style-type:none;
}
.scopeFeedsBox ul li {
    float:left;
    width:210px;
    display:inline;
    font-size:.9em;
    line-height:1.2em;
    text-align:left;
}