Centered Nav Bar - background width problem

[adaml44 1]

I'm working on centering my nav bar. I've gotten most of what I want done in that regard, but there's one problem: something in the code I added has substantially widened the page background to the right side of the canvas, creating a horizontal scroll bar. Here's what I added: ` #nav_row, .center { float:left; width:100%!important; position:relative; } #nav_row ul, .center ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; width:auto!important; } #nav_row ul li, .center ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } ` #primary-nav #nav_row {position: relative} #nav_row ul ul{ clear:none !important; float:none !important; left:-0px !important; width:200px !important; position:absolute !important; top:32px; } #nav_row ul li li{ right:0px !important; text-align:left; } I went through and removed each section one by one, and it appears that the second block of code (beginning with #nav_row ul, .center ul {) is responsible (though I'm not sure), but I have no idea how to change this while keeping the good stuff. The site is www.adamlillylaw.com

[Jenny 33]

Remove [code]right: 50%;[/code] from [code]#nav_row ul li, .center ul li [/code] :)

[adaml44 1]

Thanks, but it didn't work. That made the nav bar background extend all the way to the right end of the screen, and made the buttons right-aligned. :(

[Jenny 33]

It looks perfect when I visit your site?

[Rob 547]

Adam, Did you do a hard refresh of your screen after you implemented Jenny's solution?

[adaml44 1]

It looks good when I visit too - but there's a scroll bar at the bottom, and if you scroll over, there's twice as much background exposed on the right as there is on the left (rather than having the canvas centered on the page, and having the page automatically limit the amount of background shown to fit the available display area). It's showing up like this for me in Firefox, Chrome, and IE. *by the way, the site is currently displayed without the repair line you gave, because it created that new error. However, I may have accidentally left a block of code out when your first post, from when I was checking to see if I could identify where the problem was. This is currently the best I've gotten, so it's what I'm going with for now.

[adaml44 1]

Bob - of course :) I've been making lots of changes, so I've been using Chrome in an incognito window with the cache turned off to refresh and see changes as they're made. And, as the code she gave me produced a change (it made the nav bar background extend all the way to the right end of the screen, and made the buttons right-aligned), it was definitely implemented. But right now, on 2 computers and in 3 browsers, my wife and I are both getting a scroll area, and a much wider right background area. Are neither of you seeing that?

[Danny+ 1,327]

Hi Adam, Has this issue been resolved, as I have checked your site on numerous browsers and can't seem to see any issue at all?

[adaml44 1]

No - it's definitely showing up right now. And I've made other changes which have shown up, but this is still there, so I don't think it's a refresh/cache issue. I'm seeing about 160 pixels of background to the left of the canvas, and about 305 on the right. My computer has a ~15 inch screen, and the resolution is set at 1280x800. I'm guessing y'all are using desktops, which would explain why you may not have a scroll bar, though I'm still confused as to why the canvas would appear centered for you and very much not so for me. By going in and deleting different sections, one by one, it looks like the problem is in the second block of code. More specifically, it looks like it's related to the position:relative; left:50%; lines. If I take those out, the problem goes away. However, without those, the nav bar starts off-screen to the right (meaning some buttons aren't showing) and isn't confined to the right side of the canvas. Additionally, if I delete the last line of that block - width:auto!important; - the excess background on the left expands to about 440 pixels on my screen. Do any of you tech people by chance have a 4 year old laptop you could check this out on? Maybe I'm not explaining it well, but I think if you saw it for yourself it would make more sense. Thanks to all of you, by the way, for looking at this for me.

[kastelic 6]

I think you could replace all your custom CSS for the nav bar with [code] #primary-nav ul.main-nav { margin-left:45px; } [/code]

[adaml44 1]

THANK YOU! That not only fixed the scroll bar problem (while keeping all the good things about the previous code), it also fixed a minor problem related to selected-text highlighting. I don't know if you saw the problem or just thought the code was too bulky or something, but you fixed it perfectly. With that, I think the formatting of my site may actually be finished (at least for now).