Side-by-Side Full Browser Width Bars using pseudo elements

[dustinmaberry]

I have implemented the code found in this article:
[Full Browser Width Bars](https://css-tricks.com/full-browser-width-bars/ “Full Browser Width Bars”)

on a site I am designing for a client, which you can see here:
[http://matthew-labreche.squarespace.com/](http://matthew-labreche.squarespace.com/ “http://matthew-labreche.squarespace.com/”)
you can use visitor access to view it

It works great for me, except for one thing:
My navigation is split into two divs, side-by-side. I want the right navigation bar to mirror the same full-width lines coming off the content that the left is. Because the pseudo element on the left navigation bar is set to display:none beyond the right edge, I think it’s making the right navigation bar unable to display full-width borders to the right of that bar as well. They are in separate divs, so I’m not sure what I can do to have them display on both sides.

Can the code be fixed to achieve what I want, or is there a better way of doing it? Can anyone help? Thanks in advance.

[Paulie_D]

Really no need to do it that way.

Just structure your page something like this: http://codepen.io/Paulie-D/pen/oGKtA

[dustinmaberry]

Thank you! That makes it a lot easier.
I really appreciate it.

When I was searching and found that article I thought he was implying it was the best way to do it, but I thought it seemed I was making it hard on myself.

[Author]

Posts