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.
- 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.
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
Correct code
Balanced columns.header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.logo {
justify-self: center;
}Fixed visual result
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
Correct code
True absolute center.logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}Fixed visual result
translate(-50%, -50%) centers the logo based on its own size.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
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
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
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%withtransform:translateX(-50%). - Use
grid-template-columns:1fr auto 1frwhen 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.
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.
