Why my element uses 2 different font-sizes?

Question

I set a font-size as global. That changes when browser's width change(kind of fluid typography). I setted that to body element.

But when size of browser changes, then it changes(font-size). Why? and How can I stop this?

 *, html { -webkit-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; padding: 0; font-size: calc(16px +.75vw); }.container { background-color: #d1c6c6; padding: 10px; min-height: 100vh; }.container__box { font-weight: bold; color: white; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; padding: 15px 10px; background-color: #8b2be4; width: 90vw; font-size: 30px; }

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <div class="container"> <div class="container__box">Gridfan Jessica</div> </div>

Answer 1

But when size of browser changes, then it changes(font-size). Why?

Because you used vw font size changes when browser size changes.

How can I stop this?

Use px instead. If that's not eye comfortable, Use media query for different font sizes for different screen widths.