title: How do I get the header properly alinged with navmenu in different browsers?
body: <p>Please excuse the sloppiness and unused attributes in this markup. It's due to my constant mistakes and messing around. I'll fix it when I'm towards the end of development.</p>
  
  <p>For some reason, the header in this markup is only correctly centered in firefox. But with the use of safari and chrome it's slightly to the right and I presume it's the same for other browser aswell.</p>
  
  <p>I did use , padding-left , but then again, that only works in firefox. Is there a universal way where it stays centered in all browsers?</p>
  
  <p>I also noticed that when I attached the link to the logo, the whole header is shown to be clickable, I just want the black box to be.</p>
  
  <p>And is there a way where the website stays the same size in all browsers?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  
  
  &lt;style type="text/css"&gt;
  .slideshow { height: 0px; width: center; margin: auto }
  .slideshow img { padding-top: 40px;}
  &lt;/style&gt;
  &lt;!-- include jQuery library --&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
  &lt;script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          var controller = $.superscrollorama({
              triggerAtCenter: false,
              playoutAnimations: true,
          });
      });
      &lt;/script&gt;
  
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="path/to/your/jquery/script.js"&gt;&lt;/script&gt;
  
  
  
  &lt;div id="logo"&gt;
  &lt;a href="http://127.0.0.1:8020/Revealedclothing/index.htm"&gt;
  &lt;h1&gt;
      &lt;div id="mainContainer"&gt;
          &lt;div id="headerContainer"&gt;
          &lt;/div&gt;
         &lt;/div&gt;
  
      &lt;img src="http://oi40.tinypic.com/iz1ag0.png" width="250" height="134" style=" margin: 0 auto; width: center; padding-top:20px;  padding-left:128px;
      padding-left:258px;"&gt;&lt;/h1&gt;
  
  
  &lt;style&gt;&lt;/style&gt;
  
  &lt;style&gt;h1 {
      color: red;
      font-size: 4em;
      text-decoration: none;
      font-family: ;
      margin: 0 auto;
      width: center;
      padding-left:515px;
      padding-bottom:1px;
  }
  &lt;/style&gt;
  
  &lt;/div&gt;
  
  &lt;style&gt;
  &lt;!-- Use this for future backgrounds (optimum resolution: 1448 - 697) --&gt; 
  body
  {
  background:url("");
  background-size:0px 0px;
  background-repeat:no-repeat;
  padding-top:0px;
  
  &lt;!-- Use this for future backgrounds (optimum resolution: 1448 - 697) --&gt;
  
  
  }
  &lt;!--
   a:hover{color:none;}
  --&gt;
      .navLink {
      color: #000000;    
      text-decoration: none !important;}
  ul
  {
  list-style-type:none;
  font-size: 85%;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-weight: lighter;
  font-style: regular;}
  {
  display:inline;
  }
  &lt;/style&gt;
  
  &lt;head&gt;
  
      &lt;link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="responsiveslides.min.js"&gt;&lt;/script&gt;
  
      &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1"&gt;
      &lt;title&gt;UNKOWN&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css" media="all"&gt;
      &lt;link rel="stylesheet" type="text/css" href="star-light/star-light.css" media="all"&gt;
      &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        $(document).ready(function(){
              $("#nav-one li").hover(
                  function(){ $("ul", this).fadeIn("slow"); }, 
                  function() { } 
              );
          if (document.all) {
                  $("#nav-one li").hoverClass ("sfHover");
              }
        });
  
          $.fn.hoverClass = function(c) {
              return this.each(function(){
                  $(this).hover( 
                      function() { $(this).addClass(c);  },
                      function() { $(this).removeClass(c); }
                  );
              });
          };    
      &lt;/script&gt;
  
  
  
  &lt;style type="text/css"&gt;
  
  /* Navigation */
  .nav, .nav ul { 
      list-style: none;
      margin: 0 center;
      padding: 0;
      width: 100;
      img
  opacity:0.4;
  filter:alpha(opacity=40); /* For IE8 and earlier */
  }
  
  .nav {
    font-family: 'Ubuntu Condensed', sans-serif;
    z-index: 100;
    position: relative;
    padding-left:110px;
  }
  .nav li {
    border-left: 0px solid #000;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
    font: 1em/25px 'Ubuntu Condensed', sans-serif;
    background:   #FFFFFF;
    color: #000000;
    display: block;
    padding: 0 14px;
    text-transform: Uppercase;
    text-decoration: none;
  }
  
  .nav li a:hover {
    background: #ccc;
    color: #000;  
  
  }
  #nav-one li:hover a, 
  #nav-one li.sfHover a {
    background: #ccc;
    color: #000;
  }
  #nav-one li:hover ul a, 
  #nav-one li.sfHover ul a {
    background: #FFFFFF;
    color: #000000;   
  }
  #nav-one li:hover ul a:hover, 
  #nav-one li.sfHover ul a:hover {
    background: #ccc;
    color: #000;  
  }
  
  .nav ul {
    background:   #FFFFFF;
    border-bottom: 0px solid #000;
    list-style: none;
    margin: 0;
    width: 0px;
    position: absolute;
    top: -999em;
    left: -1px;
  }
  .nav li:hover ul,
  .nav li.sfHover ul {
    top: 25px;
  }
  .nav ul li {
    border: 0;
    float: none;
  }
  .nav ul a {
    border: 0px solid #000;
    border-bottom: 0;
    padding-right: 20px;
    width: 80px;
    white-space: nowrap;
  }
  .nav ul a:hover {
    background:   #FFFFFF;
    color: #000;
  }
  
  .nav ul {
      width: 25.5%;
      margin: 0 auto;
  }
  
  ul {
      width: 25.5%;
      margin: 0 auto;
  }
  
  
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    }
  
  .rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
    }
  
  .rslides li:first-child {
    position: relative;
    display: block;
    float: left;
    }
  
  .rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
  &lt;/style&gt;
  
  
          &lt;script&gt;/*
  jQuery Waypoints - v1.1.7
  Copyright (c) 2011-2012 Caleb Troughton
  Dual licensed under the MIT license and GPL license.
  https://github.com/imakewebthings/jquery-waypoints/blob/master/MIT-license.txt
  https://github.com/imakewebthings/jquery-waypoints/blob/master/GPL-license.txt
  */
  (function($,k,m,i,d){var e=$(i),g="waypoint.reached",b=function(o,n){o.element.trigger(g,n);if(o.options.triggerOnce){o.element[k]("destroy")}},h=function(p,o){if(!o){return -1}var n=o.waypoints.length-1;while(n&gt;=0&amp;&amp;o.waypoints[n].element[0]!==p[0]){n-=1}return n},f=[],l=function(n){$.extend(this,{element:$(n),oldScroll:0,waypoints:[],didScroll:false,didResize:false,doScroll:$.proxy(function(){var q=this.element.scrollTop(),p=q&gt;this.oldScroll,s=this,r=$.grep(this.waypoints,function(u,t){return p?(u.offset&gt;s.oldScroll&amp;&amp;u.offset&lt;=q):(u.offset&lt;=s.oldScroll&amp;&amp;u.offset&gt;q)}),o=r.length;if(!this.oldScroll||!q){$[m]("refresh")}this.oldScroll=q;if(!o){return}if(!p){r.reverse()}$.each(r,function(u,t){if(t.options.continuous||u===o-1){b(t,[p?"down":"up"])}})},this)});$(n).bind("scroll.waypoints",$.proxy(function(){if(!this.didScroll){this.didScroll=true;i.setTimeout($.proxy(function(){this.doScroll();this.didScroll=false},this),$[m].settings.scrollThrottle)}},this)).bind("resize.waypoints",$.proxy(function(){if(!this.didResize){this.didResize=true;i.setTimeout($.proxy(function(){$[m]("refresh");this.didResize=false},this),$[m].settings.resizeThrottle)}},this));e.load($.proxy(function(){this.doScroll()},this))},j=function(n){var o=null;$.each(f,function(p,q){if(q.element[0]===n){o=q;return false}});return o},c={init:function(o,n){this.each(function(){var u=$.fn[k].defaults.context,q,t=$(this);if(n&amp;&amp;n.context){u=n.context}if(!$.isWindow(u)){u=t.closest(u)[0]}q=j(u);if(!q){q=new l(u);f.push(q)}var p=h(t,q),s=p&lt;0?$.fn[k].defaults:q.waypoints[p].options,r=$.extend({},s,n);r.offset=r.offset==="bottom-in-view"?function(){var v=$.isWindow(u)?$[m]("viewportHeight"):$(u).height();return v-$(this).outerHeight()}:r.offset;if(p&lt;0){q.waypoints.push({element:t,offset:null,options:r})}else{q.waypoints[p].options=r}if(o){t.bind(g,o)}if(n&amp;&amp;n.handler){t.bind(g,n.handler)}});$[m]("refresh");return this},remove:function(){return this.each(function(o,p){var n=$(p);$.each(f,function(r,s){var q=h(n,s);if(q&gt;=0){s.waypoints.splice(q,1);if(!s.waypoints.length){s.element.unbind("scroll.waypoints resize.waypoints");f.splice(r,1)}}})})},destroy:function(){return this.unbind(g)[k]("remove")}},a={refresh:function(){$.each(f,function(r,s){var q=$.isWindow(s.element[0]),n=q?0:s.element.offset().top,p=q?$[m]("viewportHeight"):s.element.height(),o=q?0:s.element.scrollTop();$.each(s.waypoints,function(u,x){if(!x){return}var t=x.options.offset,w=x.offset;if(typeof x.options.offset==="function"){t=x.options.offset.apply(x.element)}else{if(typeof x.options.offset==="string"){var v=parseFloat(x.options.offset);t=x.options.offset.indexOf("%")?Math.ceil(p*(v/100)):v}}x.offset=x.element.offset().top-n+o-t;if(x.options.onlyOnScroll){return}if(w!==null&amp;&amp;s.oldScroll&gt;w&amp;&amp;s.oldScroll&lt;=x.offset){b(x,["up"])}else{if(w!==null&amp;&amp;s.oldScroll&lt;w&amp;&amp;s.oldScroll&gt;=x.offset){b(x,["down"])}else{if(!w&amp;&amp;s.element.scrollTop()&gt;x.offset){b(x,["down"])}}}});s.waypoints.sort(function(u,t){return u.offset-t.offset})})},viewportHeight:function(){return(i.innerHeight?i.innerHeight:e.height())},aggregate:function(){var n=$();$.each(f,function(o,p){$.each(p.waypoints,function(q,r){n=n.add(r.element)})});return n}};$.fn[k]=function(n){if(c[n]){return c[n].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof n==="function"||!n){return c.init.apply(this,arguments)}else{if(typeof n==="object"){return c.init.apply(this,[null,n])}else{$.error("Method "+n+" does not exist on jQuery "+k)}}}};$.fn[k].defaults={continuous:true,offset:0,triggerOnce:false,context:i};$[m]=function(n){if(a[n]){return a[n].apply(this)}else{return a.aggregate()}};$[m].settings={resizeThrottle:200,scrollThrottle:100};e.load(function(){$[m]("refresh")})})(jQuery,"waypoint","waypoints",window);&lt;/script&gt;
  &lt;!-- include Cycle plugin --&gt;
  &lt;script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('.slideshow').cycle({
          fx: 'scrollLeft', 
      speed:  270 // choose your transition type, ex: fade, scrollUp, shuffle, etc...
      });
  });
  &lt;/script&gt;
  
  
  
  
  
  
  
  &lt;/head&gt;
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  
  &lt;hr style="border: none; height: 1px; color: #C0C0C0; background: #C0C0C0;"/&gt;
  
  &lt;tr&gt;  
  &lt;td&gt;&lt;ul id="nav-one" class="nav"&gt;
  
  
              &lt;li&gt;
  
                  &lt;a href="#item1"&gt;MEN'S&lt;/a&gt;
                  &lt;ul style="opacity: 0.9999; display: block;"&gt;
                      &lt;li&gt;&lt;a href="#item1.2"&gt;New Arrivals&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://127.0.0.1:8020/MEN%27S-/INDEX.HTM"&gt;Tops&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#item1.2"&gt;Bottoms&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#item1.3"&gt;Outerwear&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#item1.4"&gt;Shoes&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#item2"&gt;WOMEN'S&lt;/a&gt;
                  &lt;ul style="opacity: 0.9999; display: none;"&gt;
                      &lt;li&gt;&lt;a href="#item1.2"&gt;New Arrivals&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#item1.1"&gt;Tops&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#item1.2"&gt;Bottoms&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#item1.3"&gt;Outerwear&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#item1.4"&gt;Bags&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#item3"&gt;COLLECTION&lt;/a&gt;
                  &lt;ul style="opacity: 0.9999; display: block;"&gt;
                      &lt;li&gt;&lt;a href="#item3.1"&gt;SHOWCASE&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#item3.2"&gt;MEN'S&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#item3.2"&gt;WOMEN'S&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#item4"&gt;BAGS&lt;/a&gt;
                  &lt;ul style="opacity: 0.9999; display: block;"&gt;
  
                  &lt;/ul&gt;
  &lt;li&gt;
                  &lt;a href="#item4"&gt;BLOG&lt;/a&gt;
                  &lt;ul style="opacity: 0.9999; display: block;"&gt;
              &lt;/ul&gt;
  
  
  
  
  &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
      &lt;td&gt;&lt;div class="slideshow" style="position: top;"&gt;
          &lt;img src="http://oi40.tinypic.com/iz1ag0.png" width="1448" height="697" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 100%; height: 697px;"&gt;
          &lt;img src="http://malsup.github.com/images/beach3.jpg" width="1448" height="697" style="position: center; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 100%; height: 697px;"&gt;
          &lt;img src="http://malsup.github.com/images/beach3.jpg" width="1448" height="697" style="position: center; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 100%; height: 697px;"&gt;
          &lt;img src="http://oi40.tinypic.com/iz1ag0.png" width="1448" height="697" style="position: center; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 100%; height: 697px;"&gt;
          &lt;img src="http://malsup.github.com/images/beach5.jpg" width="1448" height="697" style="position: center; top: 0px; left: 0px; display: block; z-index: 6; opacity: 1;width: 100%; height: 697px;"&gt;
      &lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/body&gt;
  
  
  
  
  &lt;/html&gt;
  </code></pre>