Making a footer for a div element - html

Question

so i want to make this footer style :
I tried my best, and i got this :
How can i make it combine like the first picture?
I've tried my best and this is my code so far :
div.code-div{
border:solid 1px #bababa;
border-radius:5px;
padding:5px;
font-family:Code;
font-size:5em;
border-bottom: solid 50px #b0b0b0;
}
div.code-div ::selection{
background-color:#adddff;
}
div.footer{
background:#b0b0b0;
border-top: solid 1px #b0b0b0;
border:solid 1px #b0b0b0;
}
b.footertext{
font-size:20%;
}
a.viewraw{
float:right;
font-size:20%;
}
table.code{
overflow-x:scroll;
display:block;
width:100%
}
td.linenum{
font-family:Code;
float:right;
margin-right:10px;
font-size:10px;
color:#bababa;
user-select: none;
}
td.linecode{
font-family:Code;
font-size:10px;
}
span.builtins.import{
color:#ffa938;
}
<link rel="stylesheet" href="0embed.css">
<div class="code-div">
<div>
<table class="code">
<tr>
<td class="linenum">1</td>
<td class="linecode"><span class="none"><span class="builtins import">import</span> PySimpleGUI <span class="builtins import">as</span> sg</span></td>
</table>
</div>
<div class="footer">
<b class="footertext">Exampletext</b>
<a class="viewraw">view raw</a>
</div>
</div>
The problem is that the text, as in the 2nd picture doesn't combine with the border, how am i supposed to combine them?
I Really Appreciate If You Help!

Answer 1

The problem is that you have padding on your .code-div and the .footer is inside that so won't go all the way to the edges. To make it work how you want, you should remove the padding from .code-div and add it to the .footer.
div.code-div{
border:solid 1px #bababa;
border-radius:5px;
font-family:Code;
font-size:5em;
border-bottom: solid 50px #b0b0b0;
}
div.footer{
background:#b0b0b0;
border-top: solid 1px #b0b0b0;
border:solid 1px #b0b0b0;
padding:5px;
}