画面幅を狭めた時にwidth: 100%を効かせたい

前提・実現したいこと

模写コーディングを勉強中です。
.contentsに対し、
width: 100%;
max-width: 1250px;
を記述し、1250pxを表示出来ない幅であれば、width: 100%　で
表示させたいです。
質問も初めてなので、そこも含めてご教授をお願い致します。

発生している問題・エラーメッセージ

画面幅を狭めてもwidth: 100%　が効いてくれません。

該当のソースコード

<html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div class="contents">
    <main>
      <h2><img src="img/mark1.png">テンプレートのご利用前に必ずお読み下さい</h2>
    
      <h3>利用規約のご案内</h3>

      <p>このテンプレートは、Template Partyにて無料配布している『ビジネス・企業向け無料ホームページテンプレート<br> tp_biz35』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。
      
      <p class="bold">■HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。</p>
    
      <p>わざと見えなく加工する事も禁止です。</p> 
        
      <p class="bold">■下部の著作を外したい場合は</p>

      <p><a href="#">Template-Party</a>の<a href="#">ライセンス契約</a>を行う事でHP下部の著作を外す事ができます。</p>
    
      <h3>テンプレートに梱包されているjsファイル(javascript)について</h3>
    
      <p>
      これらのファイルは全て<a href="#">有限会社クリタス様</a>提供のプログラムです。jsファイルは改変せずにご利用下さい。
      また、当サイトのテンプレート以外に使いたいなど、「プログラムのみ」を使う場合は<a href="#">こちらの規約</a>をお守り下さい。
      </p>
  
      <h3>当テンプレートの詳しい使い方は</h3>
    
      <p><a href="#">こちらをご覧下さい。</a></p>
    
      <h2><img src="img/mark1.png">企業向けCMSプログラム販売中</h2>
    
      <p>
        トップページや会社概要ページや業務案内ページなどの各ページレイアウト設定済みのプログラムを販売中です。<a href="#">詳しくはこちらをご覧下さい。</a>
    
      </p>
    
      <h2><img src="img/mark1.png">更新情報・お知らせ</h2>
    
      <div class="news">
        <dl>
          <dt><time>2017/02/27</time></dt>
          <dd>html,cssを中心に更新。旧ファイルが必要な場合はお問い合わせ下さい。<span>NEW</span></dd>
          <dt><time>22016/02/19</time></dt>
          <dd>biz35公開。</dd>
          <dt><time>220XX/00/00</time></dt>
          <dd>ホームページリニューアル</dd>
          <dt><time>220XX/00/00</time></dt>
          <dd>ホームページリニューアル</dd>
          <dt><time>20XX/00/00</time></dt>
          <dd>ホームページリニューアル</dd>
          <dt><time>20XX/00/00</time></dt>
          <dd>ホームページリニューアル</dd>
          <dt><time>20XX/00/00</time></dt>
          <dd>ホームページリニューアル</dd>
          <dt><time>220XX/00/00</time></dt>
          <dd>ホームページリニューアル</dd>
        </dl>
      </div><!-- news -->
    </main>
  
    <nav>
      <div class="sub-menu">
        <div class="inner">
          <p>SUB MENU</p>
          <ul>
            <li><a href="#">よく頂く質問</a></li>
            <li><a href="#">リンク集</a></li>
            <li><a href="#">主要メニュー</a></li>
            <li><a href="#">主要メニュー</a></li>
            <li><a href="#">主要メニュー</a></li>
          </ul>
        </div><!-- inner -->
      </div><!-- sub-menu -->
  
      <div class="box2">
        <p>この見出しはh2タグです</p>
        <p>ここのスペースも使えます。</p>
      </div><!-- box2 -->
    </nav>
  </div><!-- contents -->
  
  <footer>
      <p class="copyroght">Copyright© <a href="#">Sample Company</a> All Rights Reserved.</p>
      <p>《<a href="#">Web Design:Template-Party</a>》</p>
  </footer>
</body>
</html>

＜ＣＳＳ＞
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

a {
  color: #333333;
}

.contents {
  /* ※画面幅によって、1250pxを維持出来ないときは100％とします。 */
  width: 100%;
  max-width: 1250px;
  display: flex;
  margin: 0 auto;
}

main {
  margin-left: 20px;
}

main h2 {
  width: 910px;
  height: 44px;
  line-height: 44px;
  color: #ffffff;
  font-size: 14px;
  background-color: #000000;

}

main img {
  display: inline-block;
  height: 14px;
  /* ※〇の高さを真ん中にしました。 */
  vertical-align: middle;
}

main h3 {
  width: 910px;
  height: 44px;
  line-height: 44px;
  padding: 0 55px 0 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  box-sizing: border-box;
  color: #333333;
  font-size: 14px;
  background: linear-gradient(#FFF, #ebebeb);
}

main p {
  width: 910px;
  padding: 0 55px 0 15px;
  box-sizing: border-box;
  color: #333333;
  font-size: 14px;
  line-height: 2;
}

main p:first-of-type {
  margin-top: 15px;
  margin-bottom: 20px;
}

.bold {
  font-weight: bold;
  margin: 15px 0 0 0;
}

main h2:nth-of-type(2) {
  margin-top: 15px;
  margin-bottom: 15px;
}

main h2:nth-of-type(3) {
  margin-top: 30px;
}

.news {
  width: 890px;
  height: 165px;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
}

.news dt {
  font-size: 14px;
  color: #333333;
}
.news dd {
  font-size: 14px;
  color: #333333;
}

nav {
  order: -1;
}

.sub-menu {
  width: 290px;
  height: 267px;
  background-color: #e4e4e4;
}

.inner {
  padding-top: 10px;
}

.sub-menu p {
  width: 120px
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  border-left: 3px solid #000;
  margin-bottom: 10px;
  margin-left: 20px;
}

nav .sub-menu ul li {
  margin: 0 auto;
}

nav .sub-menu ul li a {
  display: inline-block;
  text-decoration: none; 
  background-color: white;
  width: 250px;
  height: 37px;
  line-height: 37px;
  margin: 0 20px;
  border-bottom: 1px solid #e4e4e4;
}

.box1 {
  width: 290px;
  height: 145px;
  margin-top: 10px;
  background-color: #e4e4e4;
}

.box1 p:first-of-type {
  font-weight: bold;
  border-left: 3px solid #000;
  margin-bottom: 10px;
  margin-left: 20px;
}

.box1 p:nth-of-type(2) {
  margin-left: 20px;
}

.box2 {
  width: 290px;
  height: 145px;
  margin-top: 10px;
}

.box2 p:first-of-type {
  border-left: 3px solid #000;
  margin-bottom: 10px;
}

footer {
  width: 100%;
  height: 60px;
  line-height: 30px;
  margin: 20px auto 0;
  text-align: center;
  background: #000;
  color: #fff;
}

.copyright {
  font-size: 11.5px;
  margin: 0;
}

footer p {
  font-size: 11px;
  margin: 0;
}

footer a {
  text-decoration: none; 
  color: #ffffff ;
}

試したこと

html内に<style>で該当部分のみ直接記述したら出来ましたので、
CSSのどこかが阻害していると思うのですが、分かりません。

<style>
.contents {
  width: 100%;
  max-width: 1250px;
}
</style>

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

.contents内の右カラム(main)の中の
main h2 main h3 main p に width: 910px;
.news に width: 890px;
と固定値が設定されてます。
また、左カラム(nav)内の .sub-menu .box2にもwidth: 290px;が設定されてます。