Возникли проблемы с центрированием по горизонтали

Вы очень близки, и вот одно решение, использующее ваш код в качестве базы. Попробуйте этот стилизованный JSFiddle и посмотрите, что вам нужно. Не стесняйтесь играть с кодом и нажмите кнопку "Выполнить", когда будете готовы видеть результаты. http://jsfiddle.net/TalkingRock/MAuzN/

Структура:
Код html упрощается с помощью "header_container" для обертывания всего заголовка (название и меню). "Indexheader" помещается в собственный div. Новое меню div теперь содержит/обертывает только пункты меню.

<div id="header_container">
<div id="indexheader"><a href="#">THIS IS MY NAME</a></div>
<div id="menu">    
<div class="links"><a href="#">About</a></div>
<div class="links"><a href="#">Graphic Design</a></div>
<div class="links"><a href="#">Studio Art</a></div>
</div> <!-- end menu -->    
</div> <!-- end header_container -->

CSS
Встроенный блок используется для сжатия обертки, центра и отображения элементов меню в одной строке. Inline-блок имеет естественный 4px-маржи вокруг каждого элемента, и его можно удалить, удалив пустое пространство между каждым элементом встроенного блока в html-коде. Вам также нужно добавить "vertical-align: top". Встроенный блок - это хороший стиль для изучения, имеет хорошую поддержку браузера и пригодится.

#header_container {
margin:0px;
padding:0px;
border:0px;     
min-height:80px; /* use min-height so the div will expand around the contents, regardless of height. */
width:100%;    
background-color:transparent;
position:fixed;
top:40px;
}

#indexheader {
text-align:center;
padding:10px;    
}

#menu {
text-align:center; /* text-align center works because of the inline-block */
}

.links {
display:inline-block;
vertical-align: top
}

Хорошая статья о lnline-блоке: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Поддержка встроенных блоков: http://caniuse.com/#feat=inline-block

Вот несколько других статей, которые вы найдете полезными. CSS Исправлено меню: http://www.w3.org/Style/Examples/007/menus.en.html Индекс Z: http://coding.smashingmagazine.com/2009/09/15/the-z-index -css-свойство-а-всесторонний-взгляд/

Примечание. В div, который содержит ваше содержимое, требуется верхнее дополнение или край, достаточный для того, чтобы убедиться, что оно не закрыто фиксированным меню. Фиксированная позиция будет неисправной в сенсорных устройствах, особенно портативных телефонах. В вашем исходном коде есть дополнительный div в вашем html, идентификатор может использоваться только один раз на странице, использовать href для ваших ссылок, а "backgound-color: transparent" (прозрачный - стиль по умолчанию).

Вы немедленно закрываете свой div с id #header, поэтому элементы под ним не получают никакого стиля. Это может быть то, что вы хотите, но тогда у вас есть дополнительный файл в конце вашего html.

Вы можете сосредоточить свой div по-разному, но следующее должно работать нормально:

#indexheader {display:block;width:100%;text-align:center;}

Удачи!

Ну, в первую очередь вам не нужно, чтобы это было много. Посмотрите на это, например: Html:

<div class="myInfo">
<h1>Your Name</h1>

<ul class="myLinks">
<li><a href="..">link</a></li>
<li><a href="..">link</a></li>
<li><a href="..">link</a></li>
</ul>

</div>

И на самом деле, вам даже не нужен div в этом случае, но независимо от того, имея класс на одном div, вы можете стилизовать с помощью селекторов, таких как:

.myInfo H1 {....}
.myInfo UL {..}

и т.д

или просто .myLinks {} для URL- .myLinks li {} а затем: .myLinks li {} для элементов списка.

Я знаю, что это быстрый ответ, но по мере того, как вы учитесь, я думаю, что было бы лучше "вроде" дать вам несколько указателей вместо того, чтобы делать все это, не так ли? :)