top nav menu bar is indent to the right

If you are able to go here:

http://utenn.dev.campuswebstore.mobi/

notice how the orange colored top nav bar (the one that has "Accessories, Hats, TShirts..." etc.) is pushed over about one inch?

It should be aligned with the T in Tennessee on the left of the main content area.

Same goes for everything below...the catalog items, etc.


I've tried finding the indent using firebug but have not been able to figure it out.

Any help would be appreciated.
LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
HagayMandelConnect With a Mentor Commented:
2 changes:
Make the #container width: 960px instead of the 770px
Add to #content:
width: 770px;
margin-left: auto;
margin-right: auto;
You can do it directly in the element style
<div id="content" style="width:770px; margin-right:auto; margin-left:auto;" role="main">
0
 
Daniel Van Der WerkenConnect With a Mentor Independent ConsultantCommented:
Just move the DIV with the id Container over to the left some pixels.

style="position: relative; left: -60px;"

the -60px could be something else.  You may have to fiddle with it.

<div id="container" style="position: relative; left: -60px;">

You can put that into the stylesheet too.
0
 
Gurvinder Pal SinghCommented:
in utenn.css line 20
you need to remove margin:0px; from here or try giving it some value like 1 or 2
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Tom KnowltonWeb developerAuthor Commented:
>>>you need to remove margin:0px; from here or try giving it some value like 1 or 2


all that does is bump the menu down about 10 pixels.

it does not correct the indent.
0
 
Gurvinder Pal SinghCommented:
you need to add
#main-nav
{
    margin-right:250px; //currently the value is 190px
}

#container
{
   margin-left:180px;
}
0
 
Tom KnowltonWeb developerAuthor Commented:
Just move the DIV with the id Container over to the left some pixels.
style="position: relative; left: -60px;"
the -60px could be something else.  You may have to fiddle with it.
<div id="container" style="position: relative; left: -60px;">
You can put that into the stylesheet too.

=======================================


This suggestion works - but I'd rather not have to do a hack in order to get this work.


In other words -- I'd rather understand why the left:-95px is necessary -- what is making this have to be added in?  Then I can correct the underlying problem.



#container #main-nav {
    width: 960px;
    position: relative;
    background: #F77F00;
    left:-95px;
}
0
 
Tom KnowltonWeb developerAuthor Commented:
#main-nav
{
    margin-right:250px; //currently the value is 190px
}


:::: completely lost ::::::

Where do you see a margin-right value of 190px   ???

Copy and paste the CSS rule you are seeing.  My current rule looks like this:


#container #main-nav {
    width: 960px;
    position: relative;
    background: #F77F00;
    left:-95px;
}



There is no #main-nav all by itself.
0
 
Gurvinder Pal SinghCommented:
I am seeing this in my debugger
0
 
Tom KnowltonWeb developerAuthor Commented:
Please post a screenshot of what you are seeing in your debugger.

I see no such CSS rule defined.
0
 
Gurvinder Pal SinghConnect With a Mentor Commented:
Its not defined as a rule ...but its the computed value of the rules which is ultimately used
0
 
Tom KnowltonWeb developerAuthor Commented:
Long story short...it's fixed now.

Thank you for the suggestions!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.