Media query is not reflected.
I wrote the following code to practice responsive design, but it is not reflected in chrome at all.
I would appreciate it if you could tell me the cause.

Error message
Applicable source code
<! DOCTYPE html>
<html lang = "en" dir = "ltr">
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0">
    <link rel = "stylesheet" type = "text/css" href = "main.css">
    <link rel = "stylesheet" type = "text/css" href = "responsive.css" media = "screen and (max-width: 900px)">

         Example Header 

.section {
      width: 47.5%;

Because it was not reflected in responsive.css, add it to main.css
@media screen and (max-width: 900px) {
.section {
width: 47.5%;
Although there was no change in the output destination.

Supplemental information (FW/tool version etc.)

Please provide more information here.