HTML,CSS勉強メモ#26 〜レイアウトが崩れる〜 #JavaScript

引き続きダウンロードしたテンプレートをいじっています。
こちらのテンプレートはほぼBootstrapで書かれているのですが、何故かウチのPCでは一部のレイアウトが崩れて？というか入りきらずに切れてしまっています。
で、いま原因を探しています。

メモ

問題の部分

    <!--Grid Row-->
    <div class="row-grid hidden-md-down">
        <div class="container container-full">
            <div class="row">
                <div class="grid col-md-4 pink">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
                <div class="grid col-md-4 purple">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
                <div class="grid col-md-4 image01">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
                <div class="grid col-md-4 light-purple">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
            </div>
            <div class="row">
                <div class="grid col-md-8 image02">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
                <div class="grid col-md-4 green">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
                <div class="grid col-md-4 image01">
                    <h2>Design Quality</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                    <br/>
                    <a href="#">Find Out More →</a>
                </div>
            </div>
        </div>
    </div>

この部分、何故か左に空白ができ、おかげではみ出してしまって各行の最後のカラムが切れてしまっています。

合計カラム数が16になってる

Bootstrapでは'col-＊-'の合計のカラム数は12のはずですが、ここでは16になってます。
てことで12になるように変えてみましたが、はみ出す事とは関係なかったようです。
やはり問題は左の余白のようです。

デベロッパーツールを見てみた

Chromeのデベロッパーツールで確認してみましたが、どうやら1824pxぐらいまでは綺麗に収まるようです。
これ以下になると左の余白を保持するためにどんどん右側が切れていってしまうようです。

各要素の幅
1440pxで各要素の幅を計算してみたところ、次のようになっていました。

`class`	`width`
`row-grit`	1440px
`container`	1926px
`row`	1533px

そりゃ切れるは・・・

container-full
- 2つ目のdiv要素についてるclass="container container-full"ですが、このcontainer-fullのスタイルにmax-width:none;が付いています。切れてしまうのはこのせいではないかと思うのですが、これを消すと今度は横長のコンテンツが縦長になってしまってカッコ悪いです。
謎のpadding
- デベロッパーツールのStylesで見ると、<div class="container container-full">の部分の最後、 element.styleにpadding:0 211.5px;というのがついています。縦長になってしまうのはこいつのせいのようです。このテンプレートはJavaScriptはParallaxのしか使っていないようなんですが・・・このpaddingがどこでついているのか探してみようと思います。 Chromeのデベロッパーツールはまだ使いこなせていないですけど、それでもとっても便利ですね！あとはこのelement.styleの出処までわかったらとても助かりますけど・・・やり方あるのかな・・

なんとなく原因は分かってきましたけど、これにするとMAXの2560pxで見たときにこの部分のコンテンツがチマってしちゃうんでなんかなって感じです。
理想はそれぞれで適切な大きさにできることだと思うので、原因だけわかったらそっちの理想型にできるように試行錯誤してみようと思います。