Div within an anchor tag not taking up entire width? HTML and CSS

Question

Okay, so I've got a div tag inside an a tag. The a tag, which has class "project" has a background image. I'm trying to make several little 300px by 300px boxes, in which there is an image, with text centered (vert and hor), so that you'd click the image and it'll take you to a link.

I want to get a hover effect (on desktops) so that when you go over this a tag, which has the image as a background image , the image darkens, making the white text more visible. On mobile, this image is always darkened so the text is clearly visible.

Here's the problem: I have everything working fine, but the "overlay" div within the a tag is not taking up the entire width of the a tag (300px by 300px box). Therefore, when I hover over the a tag, and the "overlay" div turns dark, there's a little space on both sides that is not dark.

Here is some of the code:

HTML for the projects section:

<!-- 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);
}

Here's an image of what the problem looks like:

As you can see, the left and right side of the "overlay" div are not fully expanded to fit inside the a tag, making it obvious there's a div there.

Please help me fix it, thank you.

Answer 1

If you remove the left/right padding on the anchors, and extend the width of your .project elements to 320px, it should look how you want it - though I'm not sure if you have the padding there for some other purpose.

.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/