导航栏居中及首页按钮背景色全屏显示问题求助

Hey there! Let's fix those two navigation issues for you. Here are targeted CSS solutions that’ll work smoothly even when the page is scaled:

1. Center the Red-Marked Navigation Bar #

We’ll use flexbox to center your navigation content while keeping it constrained to a reasonable maximum width (adjust this to fit your design):

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px; /* Tweak this to your preferred max width */
  margin: 0 auto;
  position: relative; /* Required for the home button background trick */
  gap: 1.5rem; /* Adds clean spacing between nav items */
}

The margin: 0 auto rule ensures the navbar stays centered as the page resizes, and flexbox keeps all navigation items aligned neatly.

2. Extend the Home Button’s Green Background to the Page Right Edge #

To make the green background stretch all the way to the right edge (even with a centered navbar), we’ll use a pseudo-element that "breaks out" of the centered container:

.home-btn {
  position: relative;
  color: white; /* Adjust text color to contrast with your green */
  padding: 0.75rem 1.25rem; /* Boosts clickable area and visual spacing */
  text-decoration: none; /* Remove underline if it’s a link */
  z-index: 1; /* Ensures button text stays above the background */
}

.home-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(-50vw + 50%); /* Stretches background to viewport right edge */
  background-color: #2ecc71; /* Replace with your exact green hex code */
  z-index: -1; /* Places background behind the button text */
}

The calc(-50vw + 50%) trick pushes the background’s right edge to the exact end of the viewport, no matter how the page is scaled. This keeps the green background consistent across all screen sizes.

Quick Checks: #

• Make sure your navbar’s parent container (like a <header>) has width: 100% so the background can reach the page edges.
• Swap #2ecc71 with your actual green color to match your design perfectly.

内容的提问来源于stack exchange，提问作者thirtythreeboas