Адаптивная верстка bootstrap 4 проблема с 320px

<header class="header">
		<div class="container header__container">
			<div class="header__info">
				<div class="row">
					<div class="col-md-2 col-2">
						<img src="img/logo.png" alt="logo">
					</div>
					<div class="col-md-7 col-lg-6 col-9">
						<h1>
							
						</h1>
					</div>
					<div class="col-md-3 col-lg-4 col-1">
						<a href="tel:"></a>
					</div>
				</div>
			</div>
		</div>

 @media screen and (max-width: 320px) {
	. col-md-7 col-lg-6 col-8{
		@include make-col(8);
	}
	.header__info {
	    padding-top: 3px;
	    padding-bottom: 3px;
	}
	.header__info img {
		margin-right: -21px;
		height: 40px;
	}
	.header__info h1 {
		font-size: 15px;
		margin-top: 6px;
	}
	.header__info a {
		margin-left: 15px;
	    margin-right: 0;
	    margin-top: 1px;
	}
	
nav {
	padding: 1px 0px 1px 13px;
}
ul {
	justify-content: space-between;
}
nav a {
	font-size: 9px;
	font-weight: 700;
	padding: 3px 0px 5px;
}



}