How do I center my search bar?

unfortunately, I’ve tried to center my search bar but it keeps driving the other elements off the screen.

my preferred result:

Do you have the markup?

SoundList

SoundList

<nav>
    <ul class="main-nav-links">
        <li><a href="#">Browse</a></li>
        <li><a href="#">Community</a></li>
    </ul>
</nav>
<div class="buttons">
    <a class="cta" href="#"> Sign Up</a>
    <a class="cta2" href="#"> Log In</a>
</div>
<div class="album-trending">


</div>

The structure? like your html code

SoundList

SoundList

<nav>
    <ul class="main-nav-links">
        <li><a href="#">Browse</a></li>
        <li><a href="#">Community</a></li>
    </ul>
</nav>



<div class="buttons">
    <a class="cta" href="#"> Sign Up</a>
    <a class="cta2" href="#"> Log In</a>
</div>

Hello but where is the search bar

please check my code pen. it keeps disappearing when i post.

Looking through this now, first thing I’m seeing is the .main-nav-links css class has the margin-right 700px, that is forcing it to not be centered. I’m going to keep digging though.

HEY,
I did some cleaning but your code was kinda messy though but you can improve it more, i was just showing you a bit .
You just had to place all items in the navigation bar in the <nav> tag
set to display:flex, justify-content:space-around and start targeting item containers

is my code better? I put them in the navs. I also need to put the first two links further left.

i have seen your code from the codepen but its kinda messy though , thats not how to get it done .
See this example.

<header>
   <nav>
      <div>
        <ul>
          <li><a href=".........">link1</a>
          <li><a href=".........">link1</a>
        </ul>
      </div>
      <div>
        <a href="..........">link</a>
        <a href="..........">link</a>
      </div>
   </nav>
</header>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.