Align Navigation bar with Header Text on the left side

I am creating a code portfolio website focused more on game and app development. It has been a while since I have done HTML and I can't figure out how to align a header with the navigation bar. I am unsure if I need to use two separate or if I can do it using CSS.

For example, I want it to have this effect:

Youtube Channel          |-----------------------------------| Represents
Name                     |-----------------------------------| Nav. Bar

Also the nav. bar should be centred between the two lines of text

This is the code I am working with:

In the head under :

ul {
 margin-left: 150px;
 padding: 0px;
 list-style: none;
}
.name {
 color: black;
}

ul will control the entire un-ordered list and .name controls the the header 3

In the body:

<h3 class="name">
</h3>
<ul>
UN-ordered list for links to other pages
</ul>

When I run it the output is:

YouTube Channel
Name
                  |----------------------------| Represents
                  |----------------------------| Nav. Bar

And my desired output is:

Youtube Channel          |-----------------------------------| Represents
Name                     |-----------------------------------| Nav. Bar