Элемент не отображается как блок

У меня есть 3 ящика, которые в обычном виде на рабочем столе отображаются встроенным способом. Моя проблема заключается в том, что в окне просмотра 640 или меньше я не могу получить следующие поля display: block; , Я попытался поставить display: block в классе .box и отдельные идентификаторы цвета. Что происходит, ящики перекрываются и лежат друг на друге.

Кто-нибудь видит, что я делаю неправильно в своей попытке?

<section id="info">
          <article>
            <a href="projects"><div id="green" class="box">
                <div class="info-box-title">PROJECTS</div>
                <div class="info-box-description">Over 60 years of accumulated projects.</div>
            </div></a>
            <a href="about"><div id="yellow" class="box">
                <div class="info-box-title">ABOUT US</div>
                <div class="info-box-description">Find out about - The Eslich Wrecking Company.</div>
            </div></a>
            <a href="contact"><div id="red" class="box">
                <div class="info-box-title">CONTACT US</div>
                <div class="info-box-description">Contact us for more information.</div>
            </div></a>
          </article>
        </section>

По умолчанию CSS

#info {
    max-width: 80%;
    height: auto;
    padding: 100px 10%;
    margin: 100px 10%;
}
.box {
    width: 20%;
    height: 300px;
    opacity:0;
    position: absolute;
    line-height: 1.5em;
}
#green, #yellow, #red {
    box-shadow: inset 0 0 0 0;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}
#green {
    background: #3e745b;
    left: 15%;


}
#yellow {
    background: #6f9697;/*#f3db6d*/
    left: 40%;
}
#red {
    background: #3e745b;
    left: 65%;
}
#green:hover, #yellow:hover, #red:hover {
    /*box-shadow: inset 0 300px 0 0 #6f9697;*/
    box-shadow: inset 0 300px 0 0 #303030;
}
#green.green{animation:slideinGreen .5s ease}
#yellow.yellow{animation:slideinYellow 1.3s ease}
#red.red{animation:slideinRed 2s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
@keyframes slideinGreen {
  from {
    left: calc(25% - 250px);opacity:0;
  }
}
@keyframes slideinYellow{
  from {
    left: calc(45% - 350px);opacity:0;
  }
}
@keyframes slideinRed {
  from {
    left: calc(65% - 450px);opacity:0;
  }
}

Медиа-запрос 640px или меньше

/*---Fade In Boxes---*/
#info {
    max-width: 100%;
    height: auto;
    padding: 100px 0%;
    margin: 0;
}
.box {
    width: 100%;
    height: 200px;
    position: absolute;
    line-height: 1.5em;
    display: block;
}
#green {
    left: 0%;
}
#yellow {
    left: 0%;
}
#red {
    left: 0%;
}