flexbox header

Why Is My Logo Not Centered in the Header?

by

Logo not centered in header problems usually happen when the logo is centered inside the remaining space, not the real header width. Unequal nav items, CTA buttons, flex spacing, absolute positioning, or mobile menu icons can make the logo look pushed to one side.

Header Alignment Fix

Why is my logo not centered in the header?

A logo can look mathematically centered in your CSS and still look visually off in the header. The most common reason is that the left and right sides of the header do not have equal width. A menu on one side, a CTA button on the other, mobile icons, or a wrong transform can shift the visual center.

CSS Fixes Responsive Fixes
  • Header layout
  • Logo alignment
  • Flexbox header
  • Mobile navbar

What the bug looks like

The logo looks slightly left or right of the true page center, especially when the header has nav links, a CTA, or a hamburger icon.

Why it happens

The header uses uneven columns, flex spacing, manual margins, or absolute positioning that centers the logo relative to the wrong thing.

What usually fixes it

Use balanced grid columns, true absolute centering, or a mobile header pattern with equal left and right control areas.

Error 1

The logo is centered between uneven header sides

This happens when the left side and right side of the header have different widths. The logo may be centered in the grid cell, but the whole header still feels visually unbalanced.

Broken code

Uneven columns 
.header {
  display: grid;
  grid-template-columns: 1fr auto 1.65fr;
  align-items: center;
}

Broken visual result

Looks off-center
visual offset
HomeWork
LOGO
SearchContact
The right side is wider, so the logo is not aligned with the true header center.

Correct code

Balanced columns 
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.logo {
  justify-self: center;
}

Fixed visual result

Centered in header
HomeWork
LOGO
Contact
Equal side columns let the center column sit on the real visual center.
Error 2

The logo uses left:50% with the wrong transform

Absolute centering is useful for logos, but only when the transform matches the element itself. A guessed transform value may look okay at one width and break at another.

Broken code

Bad transform 
.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%);
}

Broken visual result

Transform guess
wrong center
LOGO
The logo starts at 50%, but it is not pulled back by half of its own width.

Correct code

True absolute center 
.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Fixed visual result

Centered by itself
LOGO
translate(-50%, -50%) centers the logo based on its own size.
Error 3

The mobile menu icon changes the visual center

On mobile, a hamburger icon appears on one side and the logo suddenly looks off. That usually means the opposite side has no matching space, so the center column is not truly centered.

Broken code

Unbalanced mobile header 
.mobile-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

.logo {
  justify-self: start;
  margin-left: 18px;
}

Broken visual result

Mobile offset
hamburger shift
☰ LOGO
The left control affects the logo because the columns are not balanced.

Correct code

Equal mobile controls 
.mobile-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
}

.logo {
  justify-self: center;
}

Fixed visual result

Balanced mobile header
☰ LOGO
The empty right column balances the hamburger icon so the logo can sit on the true center.
Premium pattern

A production-minded centered header logo pattern

A stronger header pattern uses a three-column grid. The left and right columns are equal, the logo lives in the center, and mobile controls keep the same balance instead of relying on magic margins.

Premium code

Balanced header system 
.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-inline: clamp(16px, 4vw, 32px);
}

.site-logo {
  justify-self: center;
}

.header-left {
  justify-self: start;
}

.header-right {
  justify-self: end;
}

@media (max-width: 768px) {
  .site-header {
    grid-template-columns: 44px 1fr 44px;
  }

  .site-logo {
    justify-self: center;
  }
}

Premium visual result

Centered without guessing
Home
LOGO
Contact
The logo is centered because the layout system is balanced, not because a pixel value was guessed.

Fast practical rule

If your logo is not centered in the header, measure the left side and right side first. If they are not balanced, the logo will look off even if the CSS says it is centered.

Debug checklist

  • Check whether the logo is centered inside the header or only inside one grid/flex area.
  • Compare the width of the left navigation area with the right action area.
  • Look for manual margin-left, margin-right, or transform values applied to the logo.
  • If using absolute positioning, pair left:50% with transform:translateX(-50%).
  • Use grid-template-columns:1fr auto 1fr when the logo must sit in the true center.
  • On mobile, balance the hamburger icon with an equal placeholder or right-side control area.
  • Check if a breakpoint hides menu items but leaves old spacing behind.
  • Inspect the header wrapper padding and max-width if the logo is centered inside a shifted container.
Best first move Draw a center line through the viewport and compare it with the logo center.
Most common cause Unequal left and right header content makes the logo appear pushed to one side.
Most sneaky cause A mobile hamburger icon appears, but the opposite side has no matching space.
Better mindset Do not center the logo with a guessed margin. Center it with a balanced layout system.

Related fixes that can help

Header logo alignment problems are often connected to Flexbox centering, navbar wrapping, responsive breakpoints, and mobile menu structure.

Why is my Flexbox not centering? If the header uses flexbox and the logo is being centered inside the wrong available space. Read this fix
Why is my navbar wrapping to two lines? If the header looks off because the navigation items wrap, squeeze, or break the layout. Read this fix
Why is my mobile menu not opening? If the logo alignment issue appears together with a broken hamburger menu or mobile navigation. Read this fix
Why is my responsive design not working? If the logo only becomes off-center after a mobile breakpoint. Read this fix
Why is my container width broken? If the header wrapper or page container is shifting the whole logo area. Read this fix
Why is my page wider than the screen? If the logo looks off because the header is creating horizontal overflow on mobile. Read this fix

Final takeaway

A logo not centered in the header is usually not a logo problem. It is usually a header layout problem. The logo is being centered inside a space that is not actually the visual center of the full header.

Start by checking the left and right sides of the header. If they are uneven, use balanced grid columns, correct absolute centering, or equal mobile control areas. Once the header is balanced, the logo stops drifting.

Want more fixes like this?

Browse more CSS, header, and responsive layout debugging guides in the FrontFixer library.

CSS Fixes All Fixes

Why Is My Navbar Wrapping to Two Lines?

by

Navbar wrapping to two lines usually happens when the logo, links, button, gap, padding, or fixed widths require more horizontal space than the header can provide.

Responsive Navbar Fix

Why is my navbar wrapping to two lines?

A navbar can look clean on desktop and suddenly wrap into two messy rows on smaller screens. The problem is usually not one mysterious CSS bug. It is a space budget problem: the logo, navigation links, CTA button, gap, padding, and fixed widths are asking for more room than the header has.

Responsive Fixes CSS Fixes
  • Navbar wrapping
  • Flexbox header
  • Mobile menu
  • Overflow control

What the bug looks like

The last link drops under the logo, the CTA button moves to a second row, or the whole header becomes taller than intended.

Why it happens

The navbar has more required width than the viewport or header container can safely hold.

What usually fixes it

Reduce the space budget, allow flexible items to shrink, hide secondary links earlier, or switch to a mobile menu sooner.

Error 1

The desktop navbar is allowed to wrap

Many headers use flexbox, but forget that flex items can wrap when the row runs out of room. That may sound harmless, but a two-line navbar usually looks broken and pushes the hero section down.

Broken code

Wraps into two rows 
.navbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.nav-links {
  display: flex;
  gap: 12px;
}

Broken visual result

Header becomes two lines
two rows
HomePricingDocsContact
Start
The header technically fits, but it no longer looks like a clean navbar.

Correct code

One row until breakpoint 
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.nav-links {
  display: flex;
  gap: clamp(8px, 2vw, 16px);
  min-width: 0;
}

Fixed visual result

Clean single row
HomePricingDocsContact
Start
The row stays intentional, and secondary space is controlled before the layout collapses.
Error 2

The logo and CTA use too much fixed space

A navbar is a shared row. If the logo has a fixed width and the button also has a fixed width, the links are forced to fight for the remaining space. On smaller screens, something has to wrap, overflow, or disappear.

Broken code

Fixed widths everywhere 
.logo {
  width: 150px;
}

.nav-button {
  width: 130px;
}

.navbar {
  gap: 24px;
}

Broken visual result

No room left for links
too wide
ServicesAboutBlog
Get Started
The navbar breaks because fixed pieces consume the row before links have space.

Correct code

Flexible space budget 
.logo {
  max-width: clamp(84px, 18vw, 140px);
  flex: 0 1 auto;
}

.nav-button {
  flex: 0 0 auto;
  padding-inline: clamp(12px, 2vw, 18px);
}

.navbar {
  gap: clamp(8px, 2vw, 18px);
}

Fixed visual result

Space is shared
ServicesAboutBlog
Start
The logo, gap, and button scale down instead of forcing the links to a new line.
Error 3

The mobile menu breakpoint starts too late

A common mistake is waiting until 600px or 480px to show the mobile menu. But some desktop navbars stop fitting much earlier, especially when links are long or the logo is wide.

Broken code

Breakpoint too late 
@media (max-width: 480px) {
  .nav-links {
    display: none;
  }

  .menu-button {
    display: block;
  }
}

Broken visual result

Desktop nav forced on mobile
too late
ProductsResourcesPricingSupport
The desktop menu remains visible after the row no longer has enough space.

Correct code

Switch before it breaks 
@media (max-width: 760px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }
}

Fixed visual result

Mobile menu appears earlier
☰
The menu switches before the desktop header becomes cramped and ugly.
Error 4

A hidden width problem makes the navbar wider than the screen

Sometimes the navbar wrapping is only a symptom. The real issue is that the header, container, logo, or menu has a fixed width that creates horizontal overflow. When that happens, the navbar can wrap and the whole page may become wider than the screen.

Broken code

Forced desktop width 
.header-inner {
  width: 1180px;
  margin-inline: auto;
}

.navbar {
  min-width: 900px;
}

Broken visual result

Header overflows viewport
overflow
HomeFeaturesPricingContact
Start
A fixed header width can cause both wrapping and horizontal scrolling.

Correct code

Fluid header width 
.header-inner {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}

.navbar {
  width: 100%;
  min-width: 0;
}

Fixed visual result

Fits the viewport
☰
The header can shrink with the screen instead of forcing a desktop layout on mobile.
Premium pattern

A production-minded navbar pattern

A strong navbar does not wait until it is already broken. It uses a fluid header container, smaller responsive gaps, flexible logo sizing, safe link behavior, and a mobile menu breakpoint that starts before the row wraps.

Premium code

Responsive navbar system 
.header-inner {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 20px);
  min-width: 0;
}

.logo {
  max-width: clamp(88px, 18vw, 150px);
  flex: 0 1 auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 18px);
  min-width: 0;
}

.nav-links a {
  white-space: nowrap;
}

.menu-button {
  display: none;
}

@media (max-width: 780px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }
}

Premium visual result

Switches before it breaks
HomeDocsPricing
☰
A premium navbar has a clear space budget and a breakpoint based on when the layout stops fitting, not on a random phone size.

Fast practical rule

If your navbar is wrapping to two lines, do not start by forcing smaller font sizes. First, check the total width of the logo, links, button, gaps, and header padding. Then decide whether the desktop navbar should compress or switch to a mobile menu earlier.

Debug checklist

  • Inspect the navbar width and compare it to the viewport width.
  • Check if the header container has a fixed width or large horizontal padding.
  • Reduce desktop gap values with clamp() or mobile breakpoints.
  • Make the logo responsive with max-width instead of a hard fixed width.
  • Give flexible areas min-width:0 so they can shrink when needed.
  • Hide nonessential links before the row starts wrapping.
  • Move to a hamburger or mobile menu at the width where the navbar actually breaks.
  • Check whether the navbar is also causing horizontal overflow on mobile.
Best first move Add up the space used by logo, links, button, gap, and padding. That usually reveals the bug.
Most common cause The desktop navbar stays active after it no longer fits the available width.
Most sneaky cause A fixed header container creates overflow, making the navbar look wrapped and broken.
Better mindset A navbar is a space-management system, not just a row of links.

Related fixes that can help

If your navbar wraps to two lines, the surrounding problem may involve responsive breakpoints, flexbox spacing, fixed containers, or mobile overflow.

Why is my responsive design not working? If the navbar only breaks at certain screen widths, your breakpoint strategy may be the real issue. Read this fix
Why is my page wider than the screen? If the navbar creates sideways scrolling, inspect fixed widths and overflow first. Read this fix
Why is my mobile menu not opening? If you switch to a hamburger menu and it does not work, the issue may be structure, class names, or z-index. Read this fix

Final takeaway

A navbar wrapping to two lines is usually a sign that the header has run out of horizontal space. The fix is not always to make everything smaller. The better fix is to control the space budget: responsive logo size, smaller gaps, fluid containers, flexible links, and a mobile menu breakpoint that starts before the desktop layout breaks.

Start by inspecting the navbar container and measuring what is consuming width. Once you know which piece is stealing space, the fix becomes much easier and the header stops feeling fragile across screen sizes.

Want more fixes like this?

Browse more responsive layout and CSS debugging guides in the FrontFixer library.

Responsive Fixes All Fixes