html - Border box not showing up inside larger border box

Question

I have a larger, long box that I want to have a heading inside. I want the heading border-box to be covering the whole top of the larger box, but my heading box isn't even showing up. Here is the code that I have for this:

<!-- Larger box --> 
<div class="border-box" style="
position: absolute;
top: 3500px;
left: 420px;
border: 10px solid;
border-color: #466995;
background-color: none;
width: 260px;
height: 700px;
margin: 20px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 40px;
font-family: 'Oswald', sands serif;
                             ">
<!-- smaller heading box -->
<div class= "border-box" style="
    position: absolute;
    margin: 0 auto;
    top: 3500px;
    width: 260px;
    background-color:#466995;
    border: none;  
    box-sizing: border-box;
    text-align: center;
     box-align: center;
    ">
</div>
</div>

I want that second snippet to be inside the borders of the first one, but right now it just shows up that there's no second box.

question from:https://stackoverflow.com/questions/66068854/border-box-not-showing-up-inside-larger-border-box

Answer 1

<!-- Larger box --> 
<div class="border-box" style="
position: absolute;
top: 3px;
left: 42px;
border: 10px solid;
border-color: black;
background-color: none;
width: 280px;
height: 700px;
margin: 20px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 40px;
font-family: 'Oswald', sands serif;
                             ">
<!-- smaller heading box -->
<div class= "border-box" style="
    position: absolute;
    margin: 0 auto;
    top: 0px;
    width: 260px;
    background-color:red;
    border: none;  
    box-sizing: border-box;
    text-align: center;
     box-align: center;
    ">heading
</div>
</div>