Background clickable and not the text

Issue

I have a field and when you click on Google the website opens. But my problem is that I want to click on the whole field and not only on the text!

.section {
    display: flex;
    justify-content: center;
}
.alignment {
    width: 500px;
}
#back-style {
    text-align: center;
    color: white;
    background-color: #e6e6e6;
    line-height: 2.5;
}

<section class="section">
    <div class="alignment">
        <div id="back-style">
            <a href=https://www.google.com">Google</a>
        </div>
    </div>
</section>

Solution

Consider making #back-style the link element. You'd need to apply display: block and remove color: white to have it look the same as your original code.

.section {
    display: flex;
    justify-content: center;
}
.alignment {
    width: 500px;
}
#back-style {
    display: block;
    text-align: center;
    background-color: #e6e6e6;
    line-height: 2.5;
}

<section class="section">
    <div class="alignment">
        <a id="back-style" href="https://www.google.com">
            Google
        </a>
    </div>
</section>

Answered By - Wongjn