Top & Bottom Borders Only!

Sooo… :upside_down_face: Here’s a question regarding the beginning stages of my Portfolio Project. What’s the most efficient/correct way to place top and bottom borders over a top, centered navigation bar? I want the borders to only go over the links. I’m sure that I can get this effect by altering the left/right margin values under my .navig selector to like 700px lol… but something tells me that’s completely wrong. Plus I don’t have anything else on my page so what I did looks ok for now, but I’m also thinking that once I add more content, things will start to get warped… Suggestions? (Answers!!!) Thanks!

Page is here.

Just to clarify, you’re looking to do something like this?

----------  ----------  ----------
   Link        Link        Link
----------  ----------  ----------

Nope, the result would be what I already have, I was just wondering if there was a better way to do it rather than what I did, which was just changing the margin value to ‘shorten’ the borders. I feel like I got the result I wanted by doing a work around, rather than doing it correctly. =/

Gotcha! I don’t why I thought you meant to have the borders only over the individual links themselves :smile:
Back to your question, you can totally do something like this:

    width: 100%;
    max-width: 500px;
    margin: 0 auto;

To achieve the same display. Basically it’s setting the nav width at 100% but then setting a maximum width of 500px (that way we can change that at smaller screen sizes if need be) and then centering it with margin: 0 auto. Now that 0 auto margin does technically add large margins to the side but, since we’re letting the browser decide how much, they’re responsive rather than hardcoded.

Thanks a lot!! :joy: Your explanation really helped as well. I’ll be creating a text file of notes for myself at some point, and this situation along with details you gave will definitely be in there. Hope to see your response in my future questions lol. Thanks again @dlyons

1 Like