Using CSS Editor to center elements in header

CSS editing beginner here. I’m trying to use the CSS Editor module to override CSS in the Default theme. I’ve been able to figure out most of what I want to do, but I still can’t center all elements in the header.

I figured out how to center the image (logo) using the img { prompt as follows:

img {
display: block;
margin-left: auto;
margin-right: auto
}

But I can’t figure out how to center the navigation bar below the image. See this link, for example…the logo is centered but the navigation bar (“Welcome,” “Share Your Story,” etc.) is aligned to the left.

Is it possible to center all elements in the header? If so, how? Or do I need to overwrite code just for the navigation bar? If so, how?

Obligatory apologies for dumb questions and lack of experience. Thanks for any help you can give.

One thing which you might try is using the inspector on your browser (just search for your browser and “inspector” or “dev tools”) to see what the name of the div is that you’re trying to target.

1 Like

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