My Intern Forgot One CSS Class — and It Broke the Whole UI

CSS container class

“Your UI is gonna mess up everything.”

That’s exactly what I told our new intern last week.

He asked me to review the interface he built, and the first thing I did was inspect it using the browser’s dev tools.

Within seconds, I knew what was wrong.

No container class.

It’s one of the most common mistakes I’ve seen junior developers make with CSS. They design a layout that looks fine on their laptop, but they forget how it behaves on large screens, where everything suddenly stretches awkwardly and loses balance.

Here’s what I always do (and you can too):

I resize the browser window to test responsiveness. If the container class isn’t there, the entire UI starts expanding uncontrollably.

That’s when I explain the golden rule every developer should know:

Always wrap your layout inside a container class with a max-width.

In this article, I’ll explain why the container class matters so much and how a single line of CSS can make your UI look great on every screen.

How a UI Looks Without a Container Class

Developers often underestimate the importance of the container class.

Layout without css container class

This usually happens when someone jumps straight into CSS frameworks like Bootstrap, Reactstrap, or Material UI before properly learning vanilla CSS.

Here are two mistakes I see most often:

1. Ignoring the container class entirely
2. Using a fixed width with a percentage, like width: 80% on the parent element

At first glance, both approaches might appear acceptable, especially on a laptop screen.

But open the same website on a large desktop or a small mobile screen, and the design starts breaking.

Get Abdul Basit’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Let’s see why.

The Problem: Fixed Width Approach

<section className="parent" style={{ width: '80%' }}>
  <div className="child">{/* Content */}</div>
</section>

With this approach:

• On a large screen (e.g., 2400px wide) → the content stretches too far because it’s still 80% of a huge width.
• On a small mobile screen (e.g., 500px wide) → it shrinks too much, leaving awkward empty spaces on both sides.

Both situations look off, and your website loses visual balance and responsiveness.

So, how do you fix this?

The Solution: Use a Responsive CSS Container Class

The container class is a simple technique that ensures your UI looks consistent across all screen sizes.

Here’s how you can implement it:

<section className="container">
  {/* Content */}
</section>

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
}

Let’s break it down:

• width: 100% → allows the container to take full available space
• max-width: 1100px → prevents your content from stretching too wide, and keeps it under 1100px
• margin: 0 auto → centers the layout horizontally
• padding: 0 15px → keeps your content from touching the screen edges

With these four simple lines of CSS, your content will always stay within a comfortable 1100px width on large screens, while gracefully adapting to smaller devices without awkward spacing.

If you liked this article, you may like my other articles too.

Gimme a follow and don’t forget to show some love by clapping 👏

It really helps and keeps me motivated to write more developer-friendly tips and guides like this.

A message from our Founder

Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. ❤️

If you want to show some love, please take a moment to follow me on LinkedIn, TikTok, Instagram. You can also subscribe to our weekly newsletter.

And before you go, don’t forget to clap and follow the writer️!