外側の余白をつけたいのですが、メインコンテンツ部分から飛び出してしまいます

Question

カッテネというツールに外側の余白をつけたいのですが、うまくいかず困っています。

CSSの@media screen and (min-width: 901px) 部分を

@media screen and (min-width: 901px) {

  .kattene {
    display: table;
    width: 100%; 
  margin: 0px 20px 0px 20px;
  }

このように変更してみたのですが、画像のように飛び出してしまいます。

水平線や見出しなどはこの設定で大丈夫だったのですが、この系統に外側の余白をつけるにはどうしたらいいのでしょうか？

初歩的な質問になってしまいますが、ご教示願います。

Answer 1

widthにはマージン部分が含まれないので、引き算するしかないと思います。

    width: calc( 100% - 20px * 2 ); 

Comments

[panisyo]

width100％から引き算できたんですね。勉強になりました。
回答ありがとうございました！