Css grid шапка

Заранее прошу прощения, спрашиваю первый раз на форуме

Надо сделать простую шапку с лого и другой картинкой.

logo

это html

    <header class="main-header grid" style="background-image: url(img/bg.png);">
		

		<div class="hitems grid" style="background-image: url(img/logo.png);"></div>
		<div class="hitems grid" style="background-image: url(img/a.png);"></div>


	</header>

css :

    .grid {
	display: grid;
}



.main-header {

	grid-template-columns: repeat(4, 1fr);

}


.main-header {
	height: 60px;
	background-size: 
}


.hitems:nth-child(1){

	grid-column: 1;


}

.hitems:nth-child(2){

	grid-column: 4;
}

.hitems {

	height: 60px;
    
    background-size: cover;
    background-position: center;
    
}

Проблема в картинках. Они не выполняются как cover, а размещаются будто слишком большие.
Мне надо их растянуть на всю fr по центру.
В чем проблема ?

background-size: cover;

При cover изображения растягиваются пропорционально своим размерам по тому что больше в контейнере (высота или ширина). т.е. 40px x 30px изображение, растянутое в контейнере шириной 100px и высотой 20px будет отображаться как 100px x 75px (ширина контейнера ибо она больше высоты контейнера, но пропорции изображения сохранены).

Ты хочешь чтобы изображение помещалось целиком в контейнер, но при этом расстягивалось на сколько возможно по размерам контейнера. Используй для этого значение не cover а contain.