Extending the content area using calc(...)

Most website layouts use a .content¹ class with a fixed max-width to keep text content readable on larger screens. The area grows from mobile viewport sizes up to some maximum, usually around 768px. While this is perfect for text content, other elements, like images, benefit from more width.

One approach to solving this is to wrap only elements that should stay within the max-width with .content.

1<main>
2  <h1 class="content">About my best friend</h1>
3  <img src="..." alt="My cat Dorothy" />
4  <p class="content">
5    My cat Dorothy has been by my side for well over 13 years, ...
6  </p>
7</main>

However, using .content on individual paragraphs has its limitations. If .content defines a patterned background, it won't work anymore. Even if it's only a background color, you must be careful and use padding instead of margin, as you'll get gaps otherwise.

I also find it unlikely that you'll want to manually annotate all your content with .content, which might be impossible anyhow if a CMS serves it. You can't simply apply the style to all p elements either, since others, like figure or even regular divs, might also be top-level content.

Using calc(...)

A better way that semantically aligns with extending the content is applying .content to the whole block² and using a negative margin-inline³ to pull the images or figures outward. Intuitively, you'd apply some fixed negative margin, but this will increase the width to over 100% of the viewport width on viewports smaller than 768px + 2* <your negative margin>, making the page scroll horizontally and clipping your image.

The width of the space around your .content is 100% of the viewport width minus the current width of your .content element. Therefore, the negative margin you need to apply is exactly half of that. Fortunately, calc(...) is widely supported in browsers now, so all you need is margin-inline: calc((100vw - 100%) / -2). This will extend the element all the way to the edges without clipping or scrolling.

1<main class="content">
2  <h1>About my best friend</h1>
3  <img class="extend-full" src="..." alt="My cat Dorothy" />
4  <p>My cat Dorothy has been by my side for well over 13 years, ...</p>
5</main>

1.extend-full {
2  margin-inline: calc((100vw - 100%) / 2 * -1);
3}

Most of the content you'll want to expand shouldn't stretch to the entire width of the page, though, because the image to text width ratio can look out of place on big or ultra-wide displays.

The min(...) function gives you the smaller of two values. Limiting the extent to 32px extent looks like this:

1.extend-a-bit {
2  margin-inline: calc(
3    -1 *
4    min(
5      (100vw - 100%) / 2,
6      32px
7    )
8  );
9}

Finished result

If you want to clean up a bit or need multiple extension widths, I recommend using CSS variables to set the maximum extent. Using font-size relative units so margins scale appropriately is also a good idea.

 1.extend {
 2  margin-inline: calc(
 3    -1 *
 4    min(
 5      (100vw - 100%) / 2,
 6      var(--maximum-extent, 0)
 7    )
 8  );
 9}
10
11.extend-full {
12  --maximum-extent: Infinity;
13}
14
15.extend-a-bit {
16  --maximum-extent: 8em;
17}

Bonus tip: Centered content and minimum margins

Before display: flex was a thing, web developers used margin: 0 auto to center content. Using auto has the drawback that content will touch the edges whenever the max-width exceeds the current viewport width. You can apply padding-inline or set fixed widths based on @media (max-width: ...). Both have their own drawbacks⁴, and I prefer to use display: flex. Wrapping your .content in a centering flex container will honor the minimum margin.

1<div class="content-wrapper">
2  <main class="content">
3    <!-- ... -->
4  </main>
5</div>

1.content-wrapper {
2  display: flex;
3  justify-content: center;
4}
5
6.content {
7  max-width: 768px;
8  margin-block: 8px;
9}

This only works with a flex container. Using margin: 0 auto on .content-wrapper won't collapse the margins and thus have the same effect as padding-inline on .content.