メディアクエリによる非表示

Question

前提・実現したいこと

html,cssの練習中です。divタグにhea> 引用テキストder-listというclassをつけ、その中にリストを入れました。画面の横幅が1000px以下の時に表示が消える（display:none;）ようにしたいです。

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

divタグにheader-listというclassをつけ、その中にリストを入れました。画面の横幅が1000px以下の時に表示が消えるようにしたかったのですがうまく消えませんでした。

エラーメッセージ

該当のソースコード

ソースコード
```  .header-list{
        background-color:green;height:inherit;display:inline-block;float:right;width:31%;
      }

      .header-list ul{
        display:table;height:inherit;
      }
      .header-list li{
        list-style:none;
        font-size:13px;
        padding-top:30px;
        padding-right:5px;
        display:table-cell;
        height:inherit;
        font-style:italic;
        height:80px;
      }
      .header-list button{
        border:none;
        background-color:white;
      }
      @media screen and(max-width:1000px){
        .header-list{
          display:none!important;
        }
      }
　　　<div class="header-list" id="header-list">
          <ul　class="ulist1"style="">
            <li>
              <div style="">
                <button type="button" name="button">
                  <div class="">
                    ホストを始める
                  </div>
                </button>
              </div>
            </li>
            <li>
              <div style="">
                <button type="button" name="button">
                  <div class="">
                    ヘルプ
                  </div>
                </button>
              </div>
            </li>
            <li>
              <div style="">
                <button type="button" name="button">
                  <div class="">
                    登録する
                  </div>
                </button>
              </div>
            </li>
            <li>
                <div style="">
                <button type="button" name="button">
                  <div class="">
                    ログイン
                  </div>
                </button>
              </div>
            </li>
          </ul>
        </div>
### 試したこと
ネットで色々検索。　元の表示をnoneにし、＠media screen and(min-width:1000px){
.header-list{display:block;}
}のようにしてもうまく動作せず。
IDや!importantをつけても動作せず。

### 補足情報（FW/ツールのバージョンなど）
bootstrapが反映されるようになっています。
ここにより詳細な情報を記載してください。

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

メディアクエリ仕様の例20に見られるように、andと式の間には空白が必要です。
https://www.w3.org/TR/css3-mediaqueries/#error-handling
和訳: http://www.asahi-net.or.jp/~ax2s-kmtn/internet/css/REC-css3-mediaqueries-20120619.html#error-handling

Comments

[HIRA197]

ありがとうございます！
お二人のおかげで無事解決しました！
参考リンクもとても参考になったのでベストアンサーは✗＿✗さんにさせてもらいます。

Answer 2

@media screen and (max-width: 1000px) {
  .header-list {
    display: none;
  }
}

括弧の前に半角スペースを入れてみてください