Css responsive not working when deployed on server-CodePudding

I made a responsive home design with only html and css. When I deploy it locally the responsive part works perfectly, so I sended the files to the owner of the page, but he told me that the page wasn't responsive. He deployed it locally and in fileZila but it's like there's no media queries.

This are my html head tags.

<head>
  <title>Alpha</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" />  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
  <link href="styles.css" type="text/css" rel="stylesheet">
</head>

And here is some example of my css code, I'm not even using sass because for the project I can't use libraries (it's a pretty old page)


.navbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #c91111;
}

.navbar button{
  margin-right: 25px;
}
  
.navbar img{
  height: 4rem;
  width: 19rem;
  margin: 10px;
  background-color: white;
}

And at the end I have some responsive code.


@media screen and (max-width: 270px) {
  .navbar button{
    width: 6rem;
    font-size: 13px;
  }

  .menu_item{
    justify-content: flex-start;
    width: 11rem;
    height: 15rem;
  }

  .menu_item_4{
    height: 17rem;
  }

  .menu_item a{
    padding: 1rem;
    font-size: 16px;
  }

  .mobile-item{
    padding: 0 !important;
  }
}

Here is the live example