UGH! Can't position nav links where I want them to be

Nav bar styling for me is a nightmare. i never know what im supposed to choose as my selector and how many children deep. My current nav bar is sitting at the top and the left side of my header. i want it to be more towards the bottom and centered. Thanks for any help!!!

Here is my current code:

<header>
            <h1>My Martial Arts Journey</h1>

<!-- MAIN NAV -->
            <nav>       
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="mission.html">Mission</a></li>
                    <li><a href="belts.html">Belts</a></li>
                    <li><a href="principles.html">Principles</a></li>
                    <li><a href="animals.html">Animals</a></li>
                    <li><a href="basics.html">Basics</a></li>
                    <li><a href="gear.html">Gear</a></li>
                </ul>
            </nav>
</header>

THEN THE CSS:

ul {
    list-style-type: none;
}

ul li {
    display: inline;
    padding: 10px;
}

ul li a {
    text-decoration: none;
    background-color: #ffffff;
    color: #f00000;
    padding: 10px;  
    font-size: 1.25em;
}

Like this?

If yes, in this case, you could simply use a text-align: center on header, then some padding-top to move everything down a bit.

Yours IS how I want it to look. i was able to move and center it. But EVERYTHING moved down: The h1 My Martial Arts Journey and the logo. the logo is now hanging out of the header on the bottom. I did mess with the code alot in other ways before i made this reply. I’m trying. here is my new CSS:

header {
    background-image: linear-gradient(90deg, #000000, #444);
    border-bottom: 4px solid #f00000;
    text-align: center;
    padding-top: 75px;
    height: 160px;
    width: 100%;
}

h1 {
    color: #f00000;
    font-size: 2em;
    text-align: center;
    padding-top: 22px;
    position: absolute;
    margin-left: 750px;
}

.logo {
    float: left;
    padding-top: 22px;
    padding-left: 10px;
}

remove this and it will be perfect

You don’t need the margin left because you aligned your text, and the position is messing up the order

i commented that out and it just moved everything down a little bit


This is what I see

Please upload the updated HTML and CSS

<header>
            <h1>My Martial Arts Journey</h1>
            
            <figure class="logo">
                <a href="https://ussd.com/" target="_blank" title="To USSD.com"><img src="images/logo.jpg" alt="USSD Logo" width="115" height="116"></a>
            </figure>
            
            <!-- MAIN NAV -->
            <nav>       
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="mission.html">Mission</a></li>
                    <li><a href="belts.html">Belts</a></li>
                    <li><a href="principles.html">Principles</a></li>
                    <li><a href="animals.html">Animals</a></li>
                    <li><a href="basics.html">Basics</a></li>
                    <li><a href="gear.html">Gear</a></li>
                </ul>
            </nav>
        </header>
````/* --------------------- */
/* --- HEADER STYLES --- */
/* --------------------- */

header {
    background-image: linear-gradient(90deg, #000000, #444);
    border-bottom: 4px solid #f00000;
    text-align: center;
    padding-top: 75px;
    height: 160px;
    width: 100%;
}

h1 {
    color: #f00000;
    font-size: 2em;
    text-align: center;
    padding-top: 22px;
    /*position: absolute;
    margin-left: 750px;*/
}

.logo {
    float: left;
    padding-top: 22px;
    padding-left: 10px;
}`

i cant figure out how to take a screen shot to show you what it looks like on my end

pc
mac

Currently your nav links are not centered because of the logo being there. do you want your nav center and the logo where exactly ?

h1 centered towards top of header

nav centered apx 25 pixels below towards bottom of header below the h1

logo apx 15 pixels on the FAR LEFT of the entire header

I think it would be best is to divide your content into two for the two sections and put in divs and align them side by side.
like so: https://stackoverflow.com/questions/5645986/two-column-div-layout-with-fluid-left-and-fixed-right-column

.logo {
	text-align:left;
	margin-top: -122px;
}

Not the best practice and won’t work with mobile but this can be done.

add a padding bottom to h1, sorry didn’t add in and take a screenshot

I don’t get it. All this CSS crap does is get me frustrated

theres too many ways to do one thing and im lost

When it comes to markup and CSS there is always a way out, or rather, a way to do something. Never doubt that. What is it you wish to do?

Trying to get it to look very close to what zainabrawat has a few posts above. in that layout, he/she has the logo where i want it. the "Mt Martial Arts Journey i want more towards the top of the header. the nav raised about 15 pixels higher, and more space between the h1 and nav. Ugh, its frustrating me. the layout you see there is more-less how i want it, but, just a bit more precise in the layout