Why can't the site be responsive? Maybe adaptability is done wrong?

Question

css

There is an input: In css, the width of the input is 300px. And header with span where there are titles
<input type="text" class="searchInput" />

<div className="header">
                       <span>О нас</span>
                        <span>Телефон</span>
                        <span>На главную</span>
              </div>

I want to make the site adaptive for various devices, I write:

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

I look in the browser how the site looks on the smartphone. span is gone from hedear. Fine. But the input didn't shrink to 100px.... I noticed that some selectors are subject to responsiveness and others are not. Why is that? Maybe adaptability is done in a different way?

Answer 1

Do you have such a meta tag in the head ?
Perhaps the element's original styles are overridden and you can't override them.
Write media queries at the end of the document.
About weight

Answer 2

max-width
sometimes works wonders