편집 기록

안녕하세요.
ul, li 태그로 된 갤러리를 웹사이트에 적용중입니다.
li에 있는 아이템들중에 사진이 여러개라서 썸네일 화면에는 노출이 되지않길 바라는애들을 display:none해둔 상태입니다.
이상태에서 float:left를 지우면 inline-block 을해도 한줄에 아이템이 하나씩밖에 뜨질않아요..
그래서 대충 마진 레프트 라이트를 vw로 맞춰서 대충 해둔 상태인데 ㅠ 반응형으로 만들고싶습니다...

.demo-gallery {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;

}

.demo-gallery>ul {
  text-align: center;
  margin-bottom: 0;
}

.demo-gallery>li {
  text-align: center;
  display: inline-block;
}

.demo-gallery>ul>li {
  margin-bottom: 20px;
  margin-right: 20px;
  width: 400px;
}

.demo-gallery>ul>li a {
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

어떻게 해야할까요? ㅠㅠ
미리 감사드립ㄴ디ㅏ..

안녕하세요. ul, li 태그로 된 갤러리를 웹사이트에 적용중입니다. li에 있는 아이템들중에 사진이 여러개라서 썸네일 화면에는 노출이 되지않길 바라는애들을 display:none해둔 상태입니다. 이상태에서 float:left를 지우면 inline-block 을해도 한줄에 아이템이 하나씩밖에 뜨질않아요.. 그래서 대충 마진 레프트 라이트를 vw로 맞춰서 대충 해둔 상태인데 ㅠ 반응형으로 만들고싶습니다...

.demo-gallery { text-align: center; margin-left: auto; margin-right: auto; display: inline-block;

}

.demo-gallery>ul { text-align: center; margin-bottom: 0; }

.demo-gallery>li { text-align: center; display: inline-block; }

.demo-gallery>ul>li { margin-bottom: 20px; margin-right: 20px; width: 400px; }

.demo-gallery>ul>li a { border-radius: 3px; overflow: hidden; position: relative; }

어떻게 해야할까요? ㅠㅠ 미리 감사드립ㄴ디ㅏ..