html/css help

//html

<div class="productcontainer">
        <div class="product">
            <h2>title1</h2>
            <div class="prodDesc">
                <p>desc 1
                </p>
            </div>
            <div class="prodBuy" data-shoppy-product="xxx">
                <a>BUY</a>
            </div>
        </div>

        <div class="product">
            <h2>title2</h2>
            <div class="prodDesc">
                <p>desc2
                </p>
            </div>

            <div class="prodBuy" data-shoppy-product="xxx">
                <a>DOWNLOAD</a>
            </div>
            <div class="prodBuy" data-shoppy-product="xxx">
                <a>BUY</a>
            </div>
        </div>
    </div>
//css
.productcontainer {
    margin: auto;
    width: 80%;
    border: 1px red solid;
}

.product {
    background-color: #2e2e2e;
    border: 1px #ca3e47 solid;
    margin: auto;
    transition: 0.3s;
    width: 300px;
    height: 400px;
    display: inline-block;
    margin: 20px;
    color: #6d6d6d;
}

.product:hover {
    box-shadow: 0 0 64px 0 rgba(255, 0, 0, 0.2);
    background-color: #252525;
}

.prodBuy {
    border: 1px #5a5a5a solid;
    margin: 9px;
    width: 280px;
    height: 40px;
    bottom: 0;
    right: 0;
    transition: 0.3s;
    cursor: pointer;
}

.prodBuy a {
    color: #ca3e47;
    display: block;
    margin-top: 11px;
}

.prodBuy:hover {
    border: 1px #3eca45 solid;
}

.prodDesc {
    width: 270px;
    border: 1px #ca3e47;
    margin: 14px;
    text-align: justify;
}