Responsive layout not displaying properly on WordPress

When I shrink the screen down, it appears like it does in the image. I put it in as Visual Composer’s “Raw HTML” option, originally with a 4 item layout, which worked fine. I changed the percentages for a 6 column layout on a desktop view (3 on tablet), but this is just not displaying right.

Help, please?

CSS

.contentBox {
    padding: 0;
        text-align: center;
}
.allImg {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.arrow,
.collectionCopy {
    display: inline-block;
    float: left;
    margin: 0 auto;
    vertical-align: top;
}
.collectionCopy a p {
    text-align: left;
}
.arrow {
    min-height: 14px;
    min-width: 14px;
}

.collectionCopy p {
    display: block;
    font-size: 100%;
    padding: 0 0 5px 5px;
    margin-bottom: 0;
}

.collectionCopy p:first-child {
    color: #000000;
    font-weight: bold;
            margin-top: -4px; 
}

.collectionCopy p:last-child {
    color: #676767;
    font-color: #e1e1e1;
            margin-top: -4px;
            margin-left: 0;
}

.collectionInfo {
    display: block;
    margin-top: 15px;
}

.collectionInfo a,
.arrow a {
    text-decoration: none;
}

.collectionImg {
    float: left;
    padding: 16px 8px;
    width: 16.66%;
        margin: 0 auto;
}

.collectionImg a img {
    display: block;
    width: 100%;
            margin: 0 auto;
}

@media screen and (min-width: 420px) and (max-width: 995px) {
    .collectionImg {
        width: 33%;
        padding: 8px;
    }
}

@media screen and (min-width: 320px) and (max-width: 420px) {
    .collectionImg {
        float: none;
        width: 100%;
        margin-bottom: 32px;
    }

    .allImg {
        padding: 0;
    }

}

HTML

    <div class="allImg">

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT854_espresso_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT854_sable_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT850_toffee_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT854_espresso_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT854_sable_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT850_toffee_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

    </div> <!-- end allImg -->

</div> <!-- end contentBox -->