title: Viewport width = device-width is not working
body: <p>I have this angular app, and I want to add a responsive design for mobile version too, right now it looks horrible, I read about <code>&lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes"&gt;</code> but is not working.</p>
  
  <p><a href="https://i.stack.imgur.com/55MPR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/55MPR.png" alt="enter image description here"></a></p>
  
  <p>On my browser or on my phone it looks like that, if I change my phone to horizontal, I can see the page well.</p>
  
  <p>Here is my index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Cv&lt;/title&gt;
      &lt;base href="/" /&gt;
      &lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes"&gt;
      &lt;link rel="icon" type="image/x-icon" href="resumePhoto.png" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;!-- The core Firebase JS SDK is always required and must be listed first --&gt;
  &lt;script src="/__/firebase/7.13.2/firebase-app.js"&gt;&lt;/script&gt;
  
   &lt;!-- TODO: Add SDKs for Firebase products that you want to use
   https://firebase.google.com/docs/web/setup#available-libraries --&gt;
   &lt;script src="/__/firebase/7.13.2/firebase-analytics.js"&gt;&lt;/script&gt;
  
   &lt;!-- Initialize Firebase --&gt;
   &lt;script src="/__/firebase/init.js"&gt;&lt;/script&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>You can find the repository in my <a href="https://github.com/Ricardozs/OnlineResumeWeb" rel="nofollow noreferrer">github</a> or here is the link of the <a href="https://ricardosresume.web.app/about/overview" rel="nofollow noreferrer">app</a>.</p>
  
  <p>A funny thing is that if I change the value in the inspector let's say I change the scale from 1 to 1.1 it works, and if I return it to 1 I'll keep working, but at the beginning, it seems to be ignored.</p>
  
  <p>My problem is that it looks chopped, it doesn't matter if a try to scroll to the right I don't see my top navbar.</p>
  
  <p><em>Edit</em></p>
  
  <p>I tried to add media queries, but I discovered something, my navbar is still there, I just can't see it but I can click on the buttons, and it looks like the header-nav takes more than the width of the device, in the next image you can see that the width is 310 px but the header-nav 520 from clarity takes the value of, perhaps that's why it looks weird, I'm thinking it has something to do with the project clarity classes</p>
  
  <p><a href="https://i.stack.imgur.com/cMCPh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cMCPh.png" alt="enter image description here"></a></p>