How can i get this div to render inside another div?

I need to get a certain div inside another div, by using HTML and CSS. I placed the div go-button in the initial-bar, but won't work. Anyways, here's my code.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
    background: #2a2a2a;
    color: white;
    font-family: sans-serif;
}
.p-title-bar {
    color: #FFFFFF;
    font-size:  32px;
    line-height: 18px;
    font-style: oblique;
}
.go-button {
    background-color: #207000;
    border-radius: 10px;
    width: 100px;
    height: 50px;
}

<!-- language: lang-html -->

<div class="initial-bar" style="background-color: #1a1a1a; width: 1440px; height: 90px;">
    <div class="text-title-spacing">
         
    </div>
        <h1 class="p-title-bar">  .HUS</p>
    <div class="go-button">

    </div>
</div>

<!-- end snippet -->

It shows the div go-button out of the div initial-bar, How can i get the div go-button in the div initial-bar.

I tried to get it with CSS text-align in center, and align in center also. I expected the div go-button to be inside the div initial-bar. And it resulted on a green 100x50 pixels square with a border-radius of 10 pixels.

Your html structure is disturbing because you are have closing p tag with for h1 tag. Here is the updated code:-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  body {
            background: #2a2a2a;
            color: white;
            font-family: sans-serif;
        }
        .p-title-bar {
            color: #FFFFFF;
            font-size:  32px;
            line-height: 18px;
            font-style: oblique;
        }
        .go-button {
            background-color: #207000;
            border-radius: 10px;
            width: 100px;
            height: 50px;
        }

<!-- language: lang-html -->

<div class="initial-bar" style="background-color: #1a1a1a; width: 1440px; height: 90px;">
        <div class="text-title-spacing">
             
        </div>
        <h1 class="p-title-bar">  .HUS</h1>
        <div class="go-button">

        </div>
    </div>

<!-- end snippet -->

In your code there is an error because you open an <h1> tag and close it with <p>

which generates that a <p> element is created and this moves the <div> below

I don't know if this solves your problem because I don't quite understand what result you want to achieve

As noted, your h1 is being closed with a &lt;/p> which is fixed below. h1's are typically block elements, change this one to inline or inline-block. Then change the display on the go button to inline-block.

That said, will solve your problem but a better way (IMO) is to use flexbox

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
    background: pink;
    color: white;
    font-family: sans-serif;
}
.p-title-bar {
    color: red;
    font-size:  32px;
    line-height: 18px;
    font-style: oblique;    
    display:inline-block;
}
.go-button {
    background-color: #207000;
    border-radius: 10px;
    width: 100px;
    height: 50px;
    display:inline-block;
}

<!-- language: lang-html -->

<div class="initial-bar" style="background-color: lightgreen; width: 1440px; height: 90px;">
    <div class="text-title-spacing">
        &nbsp 
    </div>
        <h1 class="p-title-bar">  .HUS</h1>
    <div class="go-button">

    </div>
</div>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  background: pink;
  color: white;
  font-family: sans-serif;
  
}

.p-title-bar {
  color: red;
  font-size: 32px;
  line-height: 18px;
  font-style: oblique;
  
}

.go-button {
  background-color: #207000;
  border-radius: 10px;
  width: 100px;
  height: 50px;
  
}

.initial-bar{
display:flex;
justify-content:space-between;
align-items:center;}

<!-- language: lang-html -->

<div class="initial-bar" style="background-color: lightgreen;  height: 90px;">
  
  <div class="text-title-spacing">
    &nbsp
  </div>
  
  <h1 class="p-title-bar">  .HUS</h1>
  
  <div class="go-button">

  </div>
</div>

<!-- end snippet -->