メディアクエリ勉強中　レスポンシブ時に表示させたい

メディアクエリを使って1000px以下になったら要素の横幅を100%に変更

通常時
横幅：600px
高さ：200ｐｘ；

レスポンシブ時
横幅：100%

で、コードを入力しているがレスポンシブ時の表示がされない。
やりたいこととして、レスポンシブ時を表示させたいです。

コード
```<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>要素の配置換え</title>
  <link rel="stylesheet" type="text/css" href="base.css">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
  <div id="wrapper">
    <div id="box1">
    </div><!-- box1 -->
    <div id="box2">
    </div><!-- box2 -->
  </div><!-- wrapper -->
</body>
</html>

```ここに言語を入力
コード
```@media screen and (min-width:1000px){
  #wrapper{
		display: flex;
  }
	#box1{background-color:#FF0000;
	      width:600px;
	      height:200px;
        margin: 0 auto;
				margin-left: 100px;
	}
	#box2{background-color:#0000FF;
	      width:600px;
	      height:200px;
				margin: 0 auto;
				margin-right: 100px;
	}
}
@media screen and (max-width:999px){
	#box1{background-color:#FF0000;
	      width:100%;
	}
  #box2{background-color:#0000FF;
	      width:100%;
	}
}

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

回答1件

ベストアンサー

divの中身が空で、999px以下時で高さ指定も無いから見えてないだけですね。

css
1@media screen and (min-width: 1000px) {
2  #wrapper {
3    display: flex;
4  }
5  #box1 {
6    background-color: #ff0000;
7    width: 600px;
8    height: 200px;
9    margin: 0 auto;
10    margin-left: 100px;
11  }
12  #box2 {
13    background-color: #0000ff;
14    width: 600px;
15    height: 200px;
16    margin: 0 auto;
17    margin-right: 100px;
18  }
19}
20@media screen and (max-width: 999px) {
21  #box1 {
22    background-color: #ff0000;
23    width: 100%;
24    height: 200px;
25  }
26  #box2 {
27    background-color: #0000ff;
28    width: 100%;
29    height: 200px;
30  }
31}