CSS布局问题求助：多元素同行多列及页面横向滚动异常

Hey there! Let’s work through your two CSS problems step by step—they’re both super common layout challenges, so we’ll get your page looking polished in no time.

1. Aligning Contact Info, Quote Text, and Contact Form in Side-by-Side Columns #

Getting three elements to sit on the same row without breaking can be done cleanly with modern CSS layout tools like Flexbox or Grid. Here’s the simplest approach using Flexbox:

First, wrap all three elements in a parent container (e.g., <div class="contact-container">). Then apply this CSS to the parent:

.contact-container {
  display: flex;
  gap: 1.5rem; /* Adds space between columns */
  flex-wrap: wrap; /* Makes columns stack on small screens (responsive!) */
  padding: 0 1rem; /* Optional: prevents content from touching screen edges */
}

Next, style each child element to share the available space evenly:

.contact-info, .quote-text, .contact-form {
  flex: 1; /* Each column takes equal width */
  min-width: 280px; /* Ensures columns don’t get too narrow on mobile */
}

Flexbox handles alignment automatically, and the flex-wrap property keeps your layout responsive on smaller devices. If you prefer Grid, you could use this even more concise code:

.contact-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

This achieves the same responsive three-column layout with minimal setup.

2. Fixing the Unwanted Horizontal Scroll (Right-Side Blank Gap) #

That -1.23em margin on your navbar is almost certainly causing the overflow issue—negative margins pull elements outside their parent container, which triggers horizontal scrolling. Instead of relying on negative margins to make the navbar fill the page, try these cleaner fixes:

Option 1: Reset default body margins + full-width navbar #

Browsers add default margins to the <body> tag, which can make your navbar look like it’s not filling the screen. Reset that first, then set the navbar to full width:

body {
  margin: 0; /* Removes default browser margin */
}

nav {
  width: 100%;
  box-sizing: border-box; /* Ensures padding/border don’t add to the navbar’s width */
  /* Remove the -1.23em margin here */
}

Option 2: Use viewport width for full coverage #

If you need the navbar to span the entire viewport (even if the parent has padding), use vw units with a centering trick:

nav {
  width: 100vw;
  margin-left: calc(-50vw + 50%); /* Centers the navbar while spanning full viewport */
  box-sizing: border-box;
}

This pulls the navbar left and right to cover the entire screen without causing overflow.

Quick temporary fix (if you need to keep the negative margin) #

If you have to retain the -1.23em margin for some reason, hide the horizontal scrollbar by adding this to your body:

body {
  overflow-x: hidden;
}

Note: This is a band-aid solution—it hides the scrollbar but doesn’t fix the root cause of the overflow, so use it only as a last resort.

Try implementing these changes one at a time, and test your page after each adjustment. You should see the three columns align neatly on desktop and stack responsively on mobile, while the unwanted horizontal scroll disappears.

内容的提问来源于stack exchange，提问作者Jonathan V Britannia