Extended bottom border at the right - html

Question

How can I inextend the "MAKE YOU BURP" bottom border on the middle? In the right side of the food on plate, I tried to use margin: px; and it did work, but it affects other elements and the responsiveness of the webpage, is there any other way to do this without using margin: px;.
SCREENSHOT
#Main {
background-image: url('pexels-fwstudio-164005.jpg');
background-size: 1000px 700px;
}
#Main img {
width: 440px;
}
#Main #main-content {
display: inline-block;
}
#h2-last {
border-width: thick;
border-bottom: solid;
/*margin-right: 1097px;*/
}
.main-content li, a {
list-style: none;
text-decoration: none;
display: inline;
padding: 10px;
color: black;
font-weight: bold;
}
.main-content ul {
position: relative;
right: 49px;
}
#main-text {
position: relative;
bottom: 300px;
left: 500px;
}
.main-content button {
border-style: solid;
border-radius: 7px;
background: #F2A65A;
padding: 20px 25px 20px 25px;
}
<div id="children-main">
<div class="main-content">
<img src="Fish-Food-Plate-PNG.png" alt="fish in plate">
<div id="main-text">
<h2>BULALOI FOODS</h2>
<h2 id="h2-last">MAKE PEAOPLE BURP</h2>
<ul>
<li>
<button>ORDER</button>
</li>
<li>
<button>MENU</button>
</li>
</ul>
</div>
</div>
</div>

Answer 1

Just make sure the element width is set to fit content
#h2-last {
border-width: thick;
border-bottom: solid;
width: fit-content;
}
<h2 id="h2-last">MAKE PEAOPLE BURP</h2>