@media не срабатывает при определенной ширине экрана

Не могу понять причину, почему не срабатывает экран мобильной версии, начиная грубо говоря с 320px до 380px.

Суть в том, что на компе когда проверяю всё работает отлично на любом экране.

А на сервер закинул и именно маленькие размеры не работаю так как нужно.

Может ли это быть связано с тем, что я использую сетку bootstrap4 и она меняет стили ТОЛЬКО под свои стандартные размеры?

Либо же можно делать как я, а именно разбить стандартные размеры на еще несколько отрезков.

К примеру >320 и <576 я разбил еще на несколько чтобы у меня отображение было адекватное.

@media (min-width: 377px) and (max-width: 419px)
	.container
		width: auto
		margin: 0 auto	
	.subheader
		height: 50px
		.btn-phone
			display: block
			font-size: 12px
			font-weight: 700
			width: 100%
			color: #fff	
			text-align: center
			text-decoration: none
			&:hover
				color: #ffe11d	
		.phone
			display: none
		.email
			display: none
		.btn
			display: flex
			flex-direction: column
			justify-content: center
			align-items: center
			margin-right: 0px
		.call
			font-size: 11px
			&:hover
				background-color: #ffe11d
		nav
			height: 30px
			margin-top: 37px
			background: none
			.menu				
				position: fixed
				flex-direction: column
				justify-content: center
				align-items: center
				top: 0
				left: -100%
				width: 80%
				height: 100vh
				padding: 20px 15px
				background-color: rgba(0,0,0, 0.8)
				transition: 0.6s all
				&_active
					left: 0		
				.menu__item
					padding-right: 0
					border: none
					margin: 10px 0
					padding: 6px 0
					width: 100%
					text-align: center
					.menu__link
						font-size: 20px
						display: block
			.hamburger
				display: block
				position: absolute
				right: 25px
				top: -50%
				transform: translateY(-100%)
				width: 25px
				height: 12px
				span 
					display: block
					height: 2px
					width: 100%
					background-color: #fff
					margin-bottom: 2px
					transition: 0.5s all
				&_active
					span
						&:nth-child(1)
							transform: translateY(3px) rotate(-45deg)
							margin-bottom: -2px
						&:nth-child(2)
							display: none
							margin-bottom: -2px
						&:nth-child(3)
							transform: translateY(3px) rotate(45deg)
							margin-bottom: -2px 
	.subheader__box
		justify-content: left
	.promo
		.promo__card
			img
				width: 100%
			.promo__card__title
				font-size: 30px
				line-height: 35px
			.promo__card__text
				font-size: 20px
				margin-top: 10px
				line-height: 30px
			.promo__card__text__other
				font-size: 19px
				span
					font-size: 20px
	.services
		.services__box
			.services__card
				padding: 0px 30px
				.services__card__title
					font-size: 14px
	.order__card__text
		font-size: 16px
	.advantages
		.advantages__box__right
			margin-top: 20px
			.advantages__card
				width: 100%
				padding: 1% 5%
				&:hover
					box-shadow: none
	.experience
		.experience__card
				width: 250px
				height: 140px
				margin-top: 15px
				.experience__card__title
					font-size: 22px
					padding-top: 1%
				.experience__card__text
					font-size: 16px
	.d2
		display: flex
		flex-direction: column
		align-items: center
		justify-content: center		
		margin-top: 0
	.main-form
		margin-top: 20px
	.form-feed
		width: 310px
	.adr__card__list
		.adr__card__item
			font-size: 10px	
	.application
		.application__card
			margin-top: 20px
			.application__card__text
				font-size: 22px
				margin-bottom: 0
			.application__card__help__phone
				font-weight: 700
				&:hover
					color: #000
					text-shadow: none
			.application__card__img
				height: 140px

	.contacts
		.contacts__card__title
			font-size: 20px
			margin-top: 20px
		.contacts__card__phone
			font-size: 18px
		.contacts__card__email
			font-size: 18px
		.contacts__card__text
			padding-left: 70px

@media (min-width: 320px) and (max-width: 376px)
	.container
		width: auto
		margin: 0 auto	
	.subheader
		height: 50px
		.btn-phone
			display: block
			font-size: 10px
			font-weight: 700
			width: 100%
			color: #fff	
			text-align: center
			text-decoration: none
			&:hover
				color: #ffe11d	
		.phone
			display: none
		.email
			display: none
		.btn
			display: flex
			flex-direction: column
			justify-content: center
			align-items: center
			margin-right: 0px
			.call
				font-size: 10px
				padding: 1px 4px
				&:hover
					background: #ffe11d
		nav
			height: 30px
			margin-top: 37px
			background: none
			.menu				
				position: fixed
				flex-direction: column
				justify-content: center
				align-items: center
				top: 0
				left: -100%
				width: 80%
				height: 100vh
				padding: 20px 15px
				background-color: rgba(0,0,0, 0.8)
				transition: 0.6s all
				&_active
					left: 0		
				.menu__item
					padding-right: 0
					border: none
					margin: 10px 0
					padding: 6px 0
					width: 100%
					text-align: center
					.menu__link
						font-size: 20px
						display: block
			.hamburger
				display: block
				position: absolute
				right: 25px
				top: -50%
				transform: translateY(-100%)
				width: 25px
				height: 12px
				span 
					display: block
					height: 2px
					width: 100%
					background-color: #fff
					margin-bottom: 2px
					transition: 0.5s all
				&_active
					span
						&:nth-child(1)
							transform: translateY(3px) rotate(-45deg)
							margin-bottom: -2px
						&:nth-child(2)
							display: none
							margin-bottom: -2px
						&:nth-child(3)
							transform: translateY(3px) rotate(45deg)
							margin-bottom: -2px 
	.subheader__box
		justify-content: left
		.subheader__card__link
			img
				max-width: 100%	
	.promo
		.promo__card
			img
				width: 100%
			.promo__card__title
				font-size: 23px
				line-height: 30px
				padding-top: 80px
			.promo__card__text
				font-size: 16px
				margin-top: 10px
				line-height: 23px
			.promo__card__text__other
				font-size: 14px
				span
					font-size: 16px
	.services
		.services__box
			.services__box_order
				font-size: 13px
				padding: 0 20px
			.services__card
				display: flex
				flex-direction: column
				padding: 0px 10px
				margin-top: 20px
				.services__card__title
					font-size: 14px
	.order__card__text
		font-size: 14px
	.advantages
		.advantages__box__right
			margin-top: 20px
			.advantages__card
				display: flex
				flex-direction: column
				width: 100%
				padding: 1% 5%
				&:hover
					box-shadow: none
				.advantages__card__img
				margin-right: 0
				margin-left: 0
	.experience
		.experience__card
				width: 250px
				height: 140px
				margin-top: 15px
				.experience__card__title
					font-size: 22px
					padding-top: 1%
				.experience__card__text
					font-size: 16px
	.d2
		display: flex
		flex-direction: column
		align-items: center
		justify-content: center		
		margin-top: 0
	.main-form
		margin-top: 20px		
		.form-feed
			width: 310px
			padding: 10px 10px
			input
				height: 30px
				border-radius: 4px
				margin-bottom: 7px
			.form-feed__btn
				width: 100%
				height: 40px
				font-size: 15px
				border-radius: 4px
	.adr__card__list
		.adr__card__item
			font-size: 10px	
	.application
		.application__card
			margin-top: 20px
			.application__card__text
				font-size: 22px
				margin-bottom: 0
			.application__card__help__phone
				font-weight: 700
				&:hover
					color: #000
					text-shadow: none
			.application__card__img
				height: 140px
	.contacts
		.contacts__card__title
			font-size: 20px
			margin-top: 20px
		.contacts__card__phone
			font-size: 18px
		.contacts__card__email
			font-size: 18px
		.contacts__card__text
			padding-left: 70px