Adding Second Menu ("Eyebrow" Menu) above Logo / Main Nav in Craft Theme - almost there!

[valholden02]

Hi there!

I have **Almost** accomplished adding a secondary menu to my Craft theme. 

But the nav items are appearing in a column, not a row. 

Here is my site: https://valholden.myshopify.com/ 

And here is the code I added. Can anyone help tell me what to add to style it? And should the additional code be added in the Custom Liquid section or the Code? I haven't added anything to the site code, which may be the problem. 

<div class="eyebrow">
{% for link in linklists.eyebrow.links %}
<a class="header__menu-item list-menu__item link link--text focus-inset" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</div>
<style>
.c-menu2 {
display: inline;
}

@media (max-width: 989px) {
.c-menu2 {
flex-direction: inline;
align-items: center;
/*display: none; */
}
}
</style>

Grateful for any help! 

[eComInsider · Accepted solution]

Try this style : 

/* Styles */
.eyebrow {
  display: flex;
  align-items: center;
}

.eyebrow__link {
  margin-right: 10px;
}

@media (max-width: 989px) {

  .eyebrow {
    flex-direction: column;
    align-items: flex-start; 
  }

}

[valholden02]

That worked! Thank you so much! 

Is there an easy way to make it either center or align on the right side of the site? 

[valholden02]

@eComInsider 

Shoot. It looks great on desktop, but still stacked on mobile. Any hints? 

[eComInsider]

for the mobile use 

@media (max-width: 989px) {

  .eyebrow {
    justify-content: center; 
  }
  
  .eyebrow__link {
    margin: 0 5px;
  }

}

[valholden02]

That worked! Thanks! 

[eComInsider]

To center it use: 

@media (max-width: 989px) {

  .eyebrow {
    align-items: center;
  }

}