The website width changed in mobile

Question

Hi my website width doesn't show up normally in mobile, so the website looks too small. The normal width is supposed to be 375, but it become 980. I have no idea why? since I only use materialize and my SCSS doesn't hard code any width. I don't have any clue to get start. Wish to get some help. Thank you.

    .brand-logo {
  margin: 0 10px 0 10px;
}

.YellowtailLogo {
    font-family: 'Yellowtail', cursive;
}
.brand-logo img{
    height: 28px;
    position: relative;
    margin-right: 10px;
    top: 3px;
}

.h1Landing {
    font-family: 'Yellowtail', cursive;
    color: #ee6e73;
}

.msg_page_container {
    height: 100%;
    position: fixed;
    width: 100%;
    overflow: hidden;
    left: 0px;
    padding: 0 10% 0 10%;

    .collection {
      overflow: scroll;
      height: 40%;
    }

    .msg_input_div{

    }
}

Answer 1

use media query to change content-width to width of mobile screen:

@media screen and(max-width:375px){
html,body{width:100%;
box-sizing:border-box;
}
}

and include

<meta name="viewport" content="width=device-width, initial-scale=1.0">

in CSS