最小宽度屏幕上的媒体查询覆盖所有屏幕尺寸，我无法让它工作

Question

我有一个具有移动优先响应能力的 html css 示例，我为每个屏幕尺寸添加了角色，但是，浏览器只应用查询并忽略原始 css 规则，我尝试按顺序重新排列 css 文件避免覆盖但不工作！

这里是 HTML

$ sudo service postgresql start
 * Starting PostgreSQL 13 database server                                                                                                            * Error: /usr/lib/postgresql/13/bin/pg_ctl /usr/lib/postgresql/13/bin/pg_ctl start -D /var/lib/postgresql/13/main -l /var/log/postgresql/postgresql-13-main.log -s -o  -c config_file="/etc/postgresql/13/main/postgresql.conf"  exited with status 1:
2021-06-15 22:40:51.285 CEST [74] LOG:  starting PostgreSQL 13.3 (Ubuntu 13.3-1.pgdg20.04+1) on x86_64-pc-linux-gnu, compiled by gcc (Ubuntu 9.3.0-17ubuntu1~20.04) 9.3.0, 64-bit
2021-06-15 22:40:51.297 CEST [74] LOG:  could not bind IPv4 address "127.0.0.1": Permission denied
2021-06-15 22:40:51.297 CEST [74] HINT:  Is another postmaster already running on port 5432? If not, wait a few seconds and retry.
2021-06-15 22:40:51.297 CEST [74] WARNING:  could not create listen socket for "localhost"
2021-06-15 22:40:51.297 CEST [74] FATAL:  could not create any TCP/IP sockets
2021-06-15 22:40:51.304 CEST [74] LOG:  database system is shut down
pg_ctl: could not start server
Examine the log output.

我在 700px 宽度上更改输入字体大小的 CSS，但是它被覆盖到所有屏幕宽度

 <section>
      <header>
        <img src="/assets/menu.svg" class="menu-btn">
        <p class="logo">John .Y</p>
      </header>
      <!-- <div id="section-content"></div> -->
      <div class="product-wrapper">
        <h1>Add Prod</h1>
        <form>
          <div>
            <label>First Name</label>
            <input />
          </div>
          <div>
            <label>Last Name</label>
            <input />
          </div>
          <div>
            <label>Phone Number</label>
            <input />
          </div>
          <div>
            <label>Date of Birth</label>
            <input />
          </div>
          <button>Add</button>
        </form>
      </div>
    </section>