錨標簽中的Div是否不占據整個寬度？ HTML和CSS

Question

好了，所以我有一個div內標簽a標簽。 具有類“項目” a標簽具有背景圖像。 我正在嘗試制作一些300px by 300px小盒子，其中有一個圖像，文字居中（垂直和水平），以便您單擊該圖像，然后將您帶到一個鏈接。

我希望得到一個懸停效果（在桌面上），這樣，當你走在這a標簽，它具有圖像作為background image ，圖像變暗，使白色文字更加醒目。 在移動設備上，此圖像始終變暗，因此文本清晰可見。

這里的問題：我有一切工作正常，但“疊加” div的內a變量沒有（300像素300像素盒）占用了標簽的整個寬度。 因此，當我將鼠標懸停在a標簽，而“重疊” div變黑，有兩側，是不是暗一點空間。

這是一些代碼：

項目部分的HTML：

<!-- Projects Showcase Section -->
<div class="projects-section">

    <div class="wrapper">

        <a href="link-to-project" class="project">
            <div class="overlay">
                <h1>Project Name</h1>
            </div>
        </a>

        <a href="link-to-project" class="project">
            <div class="overlay">
                <h1>Project Name</h1>
            </div>
        </a>

        <a href="link-to-project" class="project">
            <div class="overlay">
                <h1>Project Name</h1>
            </div>
        </a>

    </div>
</div> 

CSS：

.projects-section {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

.wrapper {
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.project {
    width: 300px;
    height: 300px;
    background-image: url('../assets/img/p1-min.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    margin: 20px 20px 0 20px;
}

.project:nth-child(2) {
    width: 300px;
    height: 300px;
    background-image: url('../assets/img/p2-min.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
}

.project:nth-child(3) {
    width: 300px;
    height: 300px;
    background-image: url('../assets/img/p3-min.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

a {
    text-decoration: none;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 30px;
    padding: 0 10px;
}

.project .overlay {
    height: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s all ease;
    border-radius: 20px;
}

.overlay:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

這是問題外觀的圖像：

正如你所看到的，“疊加”的左側和右側div沒有完全展開，以適應內部的a標簽，使它明顯有一個div那里。

請幫助我修復它，謝謝。

Answer 1

如果您刪除錨點上的左/右填充，並將.project元素的寬度擴展到320px，它應該看起來像您想要的那樣-盡管我不確定您是否還有其他用途的填充。

.project {
    width: 320px;
    height: 300px;
    background-image: url('http://via.placeholder.com/300x300');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    margin: 20px 20px 0 20px;
}

a {
    text-decoration: none;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 30px;
    padding: 0;
}

http://jsfiddle.net/dtwLjqx4/