Problem with the Size (resolution) of my div - html

Question

My problem is my div that is called .border, the only purpose of it is to make cool border effect around the 2 headlines in the middle-left of the landingp age picture. But you can see pretty good in the screenshot, that the .border is kind of attached to the picture and stretches out. I have really no clue how to make this border perfectly centered behind the text.
.home {
margin: 3rem 6rem 3rem 6rem;
background-image: url(img/Aliens\ Cows.jpg);
background-repeat: no-repeat;
background-size: inherit;
min-height: 20rem;
box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.2), 1rem 1rem 0rem var(--clr-main);
}
.layer-over-p {
min-height: 20rem;
z-index: 1;
background: linear-gradient(90deg, rgba(32, 31, 27, 0.5), rgb(255, 234, 0, 0.6));
backdrop-filter: blur(6px);
}
.text-1 {
text-shadow: 0.5rem 0.5rem 0.4rem rgba(0, 0, 0, 0.2);
margin-top: 4.5rem;
margin-left: 8rem;
}
.text-1 a {
font-size: 6rem;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: var(--ff-primary);
}
.text-2 {
text-shadow: 0.3rem 0.3rem 0.4rem rgba(0, 0, 0, 0.2);
margin-top: -1.6rem;
margin-left: 8.32rem;
}
.text-2 a {
font-size: 1.6rem;
text-decoration: none;
color: rgb(189, 189, 189);
text-transform: uppercase;
font-family: var(--ff-primary);
}
.border {
position: absolute;
z-index: 2;
}
/* ANIMATIONS = Navbar + Home *******************************************/
.border {
border-top: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid transparent;
transition: border-top 0.5s ease-in-out, border-right 0.5s ease-in-out, border-bottom 0.5s ease-in-out, border-left 0.5s ease-in-out;
}
.border:hover {
border-top: 3px solid var(--clr-accent);
border-right: 3px solid var(--clr-accent);
border-bottom: 3px solid var(--clr-accent);
border-left: 3px solid var(--clr-accent);
}
<section class="home">
<div class="border">
<div class="text-1">My Work</div>
<div class="text-2">See my Creations.</div>
</div>
<div class="layer-over-p"></div>
</section>

Answer 1

I moved your background CSS from layer-over-p into border and wrapped both your text elements in a div with some arbitrary amount of padding. I also added #Antoine Richard's answer of simplifying the border CSS to get this result:
.home {
margin: 3rem 6rem 3rem 6rem;
background-image: url(img/Aliens\ Cows.jpg);
background-repeat: no-repeat;
background-size: inherit;
min-height: 20rem;
box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.2), 1rem 1rem 0rem var(--clr-main);
}
.layer-over-p {
min-height: 20rem;
z-index: 1;
}
.text-1 {
text-shadow: 0.5rem 0.5rem 0.4rem rgba(0, 0, 0, 0.2);
}
.text-1 a {
font-size: 6rem;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: var(--ff-primary);
}
.text-2 {
text-shadow: 0.3rem 0.3rem 0.4rem rgba(0, 0, 0, 0.2);
margin-top: -1.6rem;
margin-left: 8.32rem;
}
.text-2 a {
font-size: 1.6rem;
text-decoration: none;
color: rgb(189, 189, 189);
text-transform: uppercase;
font-family: var(--ff-primary);
}
.border {
position: absolute;
background: linear-gradient(90deg, rgba(32, 31, 27, 0.5), rgb(255, 234, 0, 0.6));
backdrop-filter: blur(6px);
z-index: 2;
overflow: wrap;
}
/* ANIMATIONS = Navbar + Home *******************************************/
.border {
border: 3px solid transparent;
transition: border-color 0.5s ease-in-out;
}
.border:hover {
border-color: var(--clr-accent);
}
<section class="home">
<div class="border">
<div style = "padding: 65px">
<div class="text-1">My Work</div>
<div class="text-2">See my Creations.</div>
</div>
</div>
</section>
This appears to keep your text items centered both within your gradient background and border, if that is what you are looking for.

Answer 2

For those who have maybe the same problem, just fixed it by deleting the margin of the text and adding the margin to the border. The Border how I added it in my post was including the margin of the text. That's why the border had such a big size.

Answer 3

As border needs some space, you need to define it even if it's not visible.
To do that, define invisible border :
border: 3px solid transparent;
Then when you need to show it :
border-color: var(--clr-accent);
And for for transition :
transition: border-color 0.5s ease-in-out;
Also, you don't need to define it for each side as they all have the same value