Как занять все пространство для изображения и центрированного фокуса только в медиа-запросе

Question

У меня есть код для изображения, и я хочу занять все оставшиеся пробелы.Размер моего изображения 259х170, и у меня большой монитор.Пространство исчезнет, ​​только если я изменю свой хром до меньшего.Кроме того, в медиа-запросе я хочу сфокусировать только 3 изображения в центре, и мой код работает, но при просмотре его на телефоне появляется пробел.

Рабочий стол

Мобильный просмотр

.photo ul{
	list-style: none;
	margin: 0 -3px 0 -40px;
	display: inline-flex;
}

.photo ul li{
	margin-right: 2px;
}

.photo ul li img{
	width: 100%;
}

@media screen and (max-width: 700px){
  .photo ul{
        margin: 0 -3px 0 -39.5%;
        width: 167%;
    }

    .photo ul li{
        margin-right: 0;
    }
}

@media only screen and (max-width: 450px){
    .photo ul{
        margin-left: -42.5%;
    }
}

@media only screen and (max-width: 390px){
    .photo ul{
        margin-left: -44.8%;
    }
}

<div class="photo" align="center">
		<ul>
			<li><img src="common/img/img2.png"></li>
			<li><img src="common/img/img3.png"></li>
			<li><img src="common/img/img4.png"></li>
			<li><img src="common/img/img5.png"></li>
			<li><img src="common/img/img6.png"></li>
		</ul>
	</div>

Answer 1

По моему мнению, из-за того, что родительский div не имеет ширины, поэтому дочерний div не принимается в соответствии с необходимостью, поэтому, пожалуйста, укажите ширину родительского div и дочернего div, пожалуйста, примите во внимание css, предложенный для решения.

Предлагаемый css для решения

.photo ul{
    width: 100%;
    margin: 0px;
    padding: 0px;
    list-style: none;
   display: inline-flex;
}

.photo ul li{
    margin-right: 2px;
    float: left;
    width: 20%;
}

.photo ul li img{
    width: 100%;
}

Answer 2

Вы уже пробовали это?

.photo ul{ 
list-style: none; 
margin: 0 -3px 0 -40px; 
display: flex; 
flex-wrap: wrap; 
}

Когда вы используете display: flex и flex-wrap: wrap, вы должны выровнять все элементы по горизонтали.Вы можете увидеть это более четко в этом уроке в свойстве flex-wrap: https://css -tricks.com / snippets / css / a-guide-to-flexbox /