How do I center my search bar?

[peace232000]

soundlist

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

my preferred result:

[larrykn]

Do you have the markup?

[peace232000]

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>

[larrykn]

The structure? like your html code

[peace232000]

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>

[larrykn]

Hello but where is the search bar

[peace232000]

[peace232000]

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

[Clint-A-Saurus]

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.

[larrykn]

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

[peace232000]

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

[larrykn]

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>