debug - css 작성이 화면 배율 문제

자주 겪는 일인데 무슨 문제인지 몰라서 자꾸만 헤메다가
아 맞어.. 이런일이 있었지 하는 아주 자주 겪는 일이다
특히 반응형 구현할 때
분명히 현재 웹페이지이고 반응형 상태가 아닌데 폰트 사이즈를 바꿔도 안먹고
@media screen and (max-width: 767px) {} 쿼리 안에서만 스타일이 조종되는게 너무 이상했다
아니 도대체 갑자기 무슨일이지 ? 하면서 한참 헤맷다
왜 아까봣던 렌더링이랑 다르지 왜 이렇게 렌더링 되나 원인을 찾아보니

문제는 ctrl+스크롤 업 버튼으로 웹페이지를 확대 해놔서였다

const Container = styled.div`
  border: 1px solid red;
  h1 {
    font-size: 35px;
    font-weight: bold;
    margin-top: 60px;
    margin-bottom: 30px;
  }

  @media screen and (max-width: 767px) {
    h1 {
      font-size: 15px;
      font-weight: bold;
      margin-top: 15px;
      margin-bottom: 10px;
    }
  }

  @media (min-width: 768px) and (max-width: 1024px) {
  }
`;