Header Issues on Webpage

I am creating a website and am having some header/navigation problems. I have centered the website (works fine) and my header begins where it should on the page but when I add a border-bottom to the header it starts where it should but continues to right side of the page. Also my nav bar (which is a float: right) begins on the right-most side of the webpage. HTML and CSS to follow. I know it is probably obvious but I am at a loss.

html,
body {
  padding: 0;
  margin: 0;
}

html {
  background-color: #FFF;
  max-width: 100%;
}

body {
  margin-left: auto;
  margin-right: auto;
  width: 1024px;
  background-color: #FFF;
  font-family: 'Merriweather', serif;
  font-family: 'Playfair Display', serif;
}

header {
  height: 6em;
  border-bottom: 1px solid #00529C;
  position: fixed;
  display: block;
  overflow: hidden;
  width: 100% !important;
  z-index: 1;
}

nav {
  max-width: 50%;
}

.hdrmenu ul {
  margin-right: 1em;
  padding-top: 1.5em;
}

.hdrmenu li {
  float: left;
  list-style: none;
  /*margin: auto;*/
}

.hdrmenu li a {
  text-align: center;
  text-decoration: none;
  padding: 0em 2em;
  /*list-style: none;*/
  overflow: hidden;
  color: #00529C;
}
<header class="bg transition">
  <nav class="hdrmenu">
    <a href="index.html"><img src="_images/1280_AcYxdW7KNtA0.png" class="logo"></a>
    <ul style="float: right;">
      <li><a href="ardvark.html" class="slide-left-right">Ardvark</a></li>
      <li><a href="beaver.html" class="slide-left-right">Beaver</a></li>
      <li><a href="cougar.html" class="slide-left-right">Cougar</a></li>
      <li><a href="dinosaur.html" class="slide-left-right">Dinosaur</a></li>
      <li><a href="elephant.html" class="slide-left-right">Elephant</a></li>
    </ul>
  </nav>
</header>

<section class="mainContent">
  <h1>Animals</h1>
  <p>Blah, Blah</p>
</section>

Here you have:

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Merriweather', serif;
  font-family: 'Playfair Display', serif;
}

header, 
.mainContent {
  width: 1024px;
}

.mainContent {
  margin: 120px auto 0;
}

header {
  height: 6em;
  border-bottom: 1px solid #00529C;
  position: fixed;
  z-index: 1;
  background-color: #FFFFFF;
  margin: 0 50%;
  transform: translateX(-50%);
  top: 0;
  left: 0;
}

.hdrmenu ul {
  margin-right: 1em;
  padding-top: 1.5em;
}

.hdrmenu li {
  float: left;
  list-style: none;
}

.hdrmenu li a {
  text-align: center;
  text-decoration: none;
  padding: 0em 2em;
  overflow: hidden;
  color: #00529C;
}

When browser cookies go bad: How to avoid 'bad header' problems , Server errors for websites you frequently visit are a pain. Most of the time these are temporary problems that the sites in question fix on their end� Microsoft IIS Open IIS Manager Select the Site you need to enable the header for Go to “HTTP Response Headers.” Click “Add” under actions Enter name, value and click Ok

To fix your border, you'll want to ensure that your <header> element doesn't take up too much space. The problem is that it has position: fixed, so width will apply relative to its current position. I assume you'll want it to be two-thirds of the page, centralised. This can be achieved by simply subtracting the right-hand space from the element (with width: calc(100% / 3 * 2)). And don't set an !important rule for this like you had in your example; !important is generally considered bad practice. You should read up on specificity instead.

You'll also want to remove your rules set on <html> and <body> and make use of a class called .container or something similar. These are document tags, and shouldn't really have positioning rules applied. Once the rules have been shifted to .container, instead of using a hard-coded width: 1024px, use max-width to allow the element to shrink when necessary.

Then, if you want your navbar's links to float to the right, you'll want to remove max-width: 50% from nav.

This can be seen in the following:

html,
body {
  padding: 0;
  margin: 0;
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100% / 3 * 2);
  background-color: #FFF;
  font-family: 'Merriweather', serif;
  font-family: 'Playfair Display', serif;
}

header {
  height: 6em;
  border-bottom: 1px solid #00529C;
  position: fixed;
  display: block;
  overflow: hidden;
  width: calc(100% / 3 * 2);
  z-index: 1;
}

.hdrmenu ul {
  margin-right: 1em;
  padding-top: 1.5em;
}

.hdrmenu li {
  float: left;
  list-style: none;
  /*margin: auto;*/
}

.hdrmenu li a {
  text-align: center;
  text-decoration: none;
  padding: 0em 2em;
  /*list-style: none;*/
  overflow: hidden;
  color: #00529C;
}
<div class="container">

  <header class="bg transition">
    <nav class="hdrmenu">
      <a href="index.html"><img src="_images/1280_AcYxdW7KNtA0.png" class="logo"></a>
      <ul style="float: right;">
        <li><a href="ardvark.html" class="slide-left-right">Ardvark</a></li>
        <li><a href="beaver.html" class="slide-left-right">Beaver</a></li>
        <li><a href="cougar.html" class="slide-left-right">Cougar</a></li>
        <li><a href="dinosaur.html" class="slide-left-right">Dinosaur</a></li>
        <li><a href="elephant.html" class="slide-left-right">Elephant</a></li>
      </ul>
    </nav>
  </header>

  <section class="mainContent">
    <h1>Animals</h1>
    <p>Blah, Blah</p>
  </section>
</div>

Header image and text for website does not load properly on Firefox , Problem: The Header image and text do not display properly in Firefox: The content does displays properly in Chrome, Opera and Safari. By the� When planning a website, a designer will place your website header at the very top of your page. This is because your header should be the first thing your viewers see when clicking onto your page. Your header design is therefore created to make a great first impression and let your viewers know they have come to the right place.

Can you check the snippet here if that's what you want

https://jsfiddle.net/qu9hg84o/7/

As @obsidian-age says, the problem is position: fixed. position:fixed will take the content out of normal flow, so body can't contain header and hence the border flows till end. Because, for position: fixed, container will be viewport. Check position and containing_block about position and containing blocks.

Also, you might want to remove width: 50% on nav, it positions nav items awkwardly somewhere in middle on the page.

And, removing float: left on list items li will stack up the list items on your right if that's also what you are expecting.

Why is all header text outlined on some websites?, I figured it out! It's a problem with a font I had installed. I delete the font from my system and it is fixed. (well, nearly fixed. One of the fonts won't� When designing a website header that is branding a business, consider keeping it simple and only including your logo and tagline to keep the header area nice and small. If adding imagery to the header design, be careful not to overdo it — consider sticking with one main hero image, and be sure it is relevant and communicates what the site is about.

What's Happening with Your Homepage Header, Hero and , Does your homepage header make a powerful first impression? Here are 15 examples of headers, headlines and hero images that keep visitors on your website. Quickly and easily assess the security of your HTTP response headers

Headings • Page Structure • WAI Web Accessibility Tutorials, Web Accessibility Tutorials Guidance on how to create websites that meet WCAG . Jump to the Headings communicate the organization of the content on the page. In those cases, consistency across pages is more important. SHARE. There’s no chance to make a second impression. So, you should think twice about what to include into the header: It might be a CTA, that triggers a certain response from the website visitors, in exchange to your message. The Call-to-action should be clearly defined and easy to understand by the website visitors.

Checking HTTP Headers, How can I check the character encoding information sent in the HTTP header of a web by the W3C, checks web pages for various internationalisation issues. HTTP headers let the client and the server pass additional information with an HTTP request or response. An HTTP header consists of its case-insensitive name followed by a colon (:), then by its value.

Comments
  • It's hard to know exactly what you are trying to achieve. Do you want the header (and border bottom) to stretch the whole width of the screen? And I presume the <section> to be displayed below the header?
  • Does this achieve what you want? repl.it/@rhodespeter2/Header-issue