질문 있습니다

overflow: hidden이 적용 안되는 현상과 footer가 영역 바깥으로 나가는 현상이 생겨 질문드립니다. 똑같이 한 것 같은데 어디서 잘못 된 것인가요?

<html>
  <head>
    <meta charset="utf-8">
    <title>인스타그램</title>
    <link rel="stylesheet" href="styles/card.css">
  </head>
  <body>
    <section class="container">
      <article class="card">
        <header>
          <div class="circle-image">
            <img src="images/profile.png">
          </div>
          <div class="card-username">
            <span>inflearn</span>
          </div>
          <div class="option-more">
            <button class = "transparent-button"><img src="images/icons/mark.png"></button>
          </div>
        </header>
        <main>
          <div class="carousel" data="0">
            <!-- 캐러셀 들어갈 영역 -->
            <div>
                <ul>
                  <li>
                    <img src="images/mountain1.jpg">
                  </li><li> <img src="images/mountain2.jpg"></li><li><img src="images/mountain3.jpg"></li><li><img src="images/mountain4.jpg"></li>
                </ul>
                <div class="slide slide-left">
                  <button type="button" class="transparent-button" name="button">
                    <img src="images/icons/arrow-left.png">
                  </button>
                </div>
                <div class="slide slide-right">
                  <button type="button" class="transparent-button" name="button">
                    <img src="images/icons/arrow-right.png">
                  </button>
                </div>
            </div>
            <footer>
              <div class="active">

              </div>
              <div>

              </div>
              <div>

              </div>
              <div>

              </div>
            </footer>
          </div>
          <div class="card-container">
            <div class="card-buttons">
              <div>
                <button class="transparent-button"><img src="images/icons/heart.png"></button>
              </div>
              <div>
                <button class="transparent-button"><img src="images/icons/chat.png"></button>
              </div>
              <div>
                <button class="transparent-button"><img src="images/icons/paper-plane.png"></button>
              </div>
              <div class="last-card-button">
                <button class="transparent-button"><img src="images/icons/bookmark.png"></button>
              </div>
            </div>

            <div class="card-likes">
              좋아요 99개
            </div>
            <div class="card-content">
              <ul>
                <li>
                  <div>
                    <span>inflearn.user</span> 본문내용
                  </div>
                </li>
                <li class="comment">
                  <div>
                    <span>inflearn.user</span> 댓글 1
                    <button class="transparent-button"><img src="images/icons/heart.png"></button>
                  </div>
                </li>
                <li class="comment">
                  <div>
                    <span>inflearn.user</span> 댓글 2
                    <button class="transparent-button"><img src="images/icons/heart.png"></button>
                  </div>
                </li>
              </ul>
            </div>
            <div class="card-time">
              7일전
            </div>
          </div>
        </main>
        <footer class="card-comment">
          <input type="text" placeholder="댓글 달기..." name="comment">
          <div>
            <button class="transparent-button">게시</button>
          </div>
        </footer>
      </article>
    </section>
  </body>
</html>

*{
  padding: 0;
  margin: 0;
}

ul, li{
  list-style: none;
}

button.transparent-button{
  background-color: transparent;
  border:0;
  outline:0;
  cursor: pointer;
}

.container {
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px 0;
}
article.card{
  width: 600px;
  margin: 20px auto;
  margin-bottom: 60px;
  background: #fff;
  border: 1px solid #c0c0c0;
  border-radius: 3px;
}

/*** HEADER 시작 ***/
article.card header{
  height: 40px;
  padding: 10px;
}
article.card header > div {
  display: inline-block;
  vertical-align: middle;
}
.circle-image{
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.circle-image > img {
  height: 100%;
  border-radius: 50%;
}
.card-username {
  padding: 10px 0;
  font-weight: 900;
  line-height: 20px;
  margin-left: 5px;
  font-size: 13px;
}
.option-more {
  float: right;
  padding: 7px;
}
/*** HEADER 종료***/

/*** CONTENT 시작 ***/

/*버튼*/
.card-container {
  padding: 5px 10px;
}
.card-buttons {
  padding: 0 5px;
  margin-top: 5px;
}
.card-buttons>div{
  display: inline-block;
  margin-right: 10px;
}
.card-buttons > div.last-card-button{
  float: right;
  margin-right: 0;
}
/*좋아요*/
.card-likes{
  padding: 5px;
  font-size:13px;
  font-weight: 900;
}
/*본문*/

.card-content {
  padding: 2px 5px;
  font-size: 13px;
}
.card-content li > div{
  padding: 1px 0;
}
.card-content li > div > span {
  font-weight: 900;
}
.card-content li.comment > div > button{
  float: right;
}
.card-content li.comment > div > button> img{
  width: 12px;
  margin-right: 5px;
}
/*시간*/
.card-time{
  padding: 3px;
  font-size: 11px;
  color: #a0a0a0;
}
/*FOOTER*/
footer.card-comment {
  position: relative;
  height:55px;
  border-top: 1px solid #e0e0e0;
}

footer.card-comment input{
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  color: #606060;
  padding: 0 15px;
}
footer.card-comment > div{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
footer.card-comment > div > button {
  color: #0095f6;
  opacity: 0.5;
  padding:10px 5px;
}
/*캐러셀*/
article.card main.carousel {
  width: 100%;
  position: relative;
}
article.card main.carousel > div {
  overflow: hidden;
}
article.card main .carousel ul{
  width: 10000px;
}
article.card main .carousel ul>li{
  display: inline-block;
}
article.card main .carousel ul>li img{
  width: 600px;
}

인프런 커뮤니티 질문&답변