検証モードの結果をコピペしても反映されません

画像の赤枠の幅を縮めようとクラスc-gridにmargin:0 20px；を与えました。(検証モードで)
するとwebの画面上ではちょうど良い幅になったので、同じく実際のコードでクラスc-gridにmargin:0 20px；を与えたのですが、
なにも変わりませんでした。
何が問題なのでしょうか？

.pa-top-guilde-list {
  margin-top: 4px;
}
.c-grid {
  display:flex;
  flex-wrap: wrap;
  // margin:-16px -8px 0;
  box-sizing: border-box;
  margin:0 20px;
}
.pa-top-guilde-list__item {
  min-height:125px;
}
.c-grid__item--12 {
  width:50%;
  flex-shrink:0;
  padding:16px 8px 0;
  box-sizing:border-box;
}
.pa-top-guilde-list__item>a {
  display: flex;
  background: #fff;
  border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.28);
  text-decoration:none;
  overflow: hidden;
  padding:7px;
  height:100%;
}
.pa-top-guilde-list__item a:hover {
  color:#f60;
}
.pa-top-guilde-list__item a {
  color: #0038ef;
  text-decoration:underline;
}
.pa-top-guilde-list__img {
  width:130px;
}
.c-grid img {
  width: 100%;
  box-sizing: border-box;
}
element.style {
  height:97.5px;
}
.pa-top-guilde-list__item dl {
  position: relative;
  padding-right: 30px;
  display: flex;
  flex-wrap:wrap;
  width: calc(100% - 140px);
}
.pa-top-guilde-list__item dl>dt {
  font-weight: 700;
}
.pa-top-guilde-list__item dl dd {
  color:#2a2a2a;
  font-size: 14px;
  margin-top: 5px;
  line-height: 1.5;
}

<section class="guide">
    <div class="guide-content"><!-- 箱の説明 -->
      <div class="guide-ttl">
        <h1>よく分かる代理店選びガイド</h1>
      </div>
      <div class="guide-text">
        <p>「広告運用ははじめて」という方はもちろん、「広告運用の仕組みをもっと知りたい」という方も、<br>
        安全・安心の広告運用代理店選びのために、ぜひご覧ください。</p>
      </div>
      
      <div class="c-grid pa-top-guilde-list" >
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="/guide/type/" data-ga-category="top_201802_facility-guide" data-ga-label="type">
                <p class="pa-top-guilde-list__img"><img src="/img/type.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>代理店の選び方</dt>
                    <dd>代理店に広告運用を任せるメリット・デメリットを知れば、選ぶポイントが身につきます。</dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="cost">
                <p class="pa-top-guilde-list__img"><img src="/img/type.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>広告運用の費用</dt>
                    <dd>費用や料金の相場をわかりやすく解説。入居一時金や月額利用料の複雑な料金形態もこれで納得。</dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="how-to-choose">
                <p class="pa-top-guilde-list__img"><img src="/img/type.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>広告の種類</dt>
                    <dd>自社にあった広告の正しい選び方・探し方について。理想のマーケティング手段を探しだすコツをご説明します。<br><br></dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="care-insurance">
                <p class="pa-top-guilde-list__img"><img src="/img/type.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>介護保険制度とは</dt>
                    <dd>介護施設や在宅介護サービスの利用時に活用。介護保険の仕組みや要介護認定の申請などを解説します。</dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="care-trouble">
                <p class="pa-top-guilde-list__img"><img src="/img/type.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>広告運用の問題・トラブル</dt>
                    <dd>運用開始後、予期しない問題やトラブルに巻き込まれるかもしれません。それらの事例や解決法についてご紹介します。</dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="care-case-studies">
                <p class="pa-top-guilde-list__img"><img src="/img/type.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>商材・業界別事例集</dt>
                    <dd>会社別に広告運用サービス・費用についての事例をシミュレーション。ご自身にあてはめて参考にしてみてください。</dd>
                </dl>
            </a>
        </div>
    </div>
    </div>