How to center a fixed-width panel for recipe summaries with CSS

Create an isolated HTML example

Create a new folder and save a plain-text file named index.html. Use an isolated practice file so the experiment does not change a live page. The example uses semantic HTML, a system font and local CSS.

Paste the complete sample

Paste the following into index.html and save it. It includes a viewport declaration, the component styles, and a small-screen rule.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Recipe Summaries CSS practice</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 2rem; font-family: system-ui, sans-serif; }
.panel { width: min(100% - 2rem, 48rem); margin-inline: auto; }
.panel > * { min-width: 0; }
button { font: inherit; padding: .75rem 1rem; }

.panel > * + * { margin-block-start: 1rem; }
.action { margin-top: auto; }
button:focus-visible { outline: 3px solid #185cce; outline-offset: 3px; }
@media (max-width: 36rem) { .panel { grid-template-columns: minmax(0, 1fr); } }
</style>
</head>
<body>
<section class="panel recipe-summary" aria-label="Recipe Summaries example">
  <div><h1>Recipe Summaries</h1><p>A short title and supporting text make the first item easy to inspect.</p></div>
  <div><h2>Second item</h2><p>Use a longer sentence here to test wrapping, spacing and different text lengths.</p></div>
  <div class="action"><button type="button">Example action</button></div>
</section>
</body>
</html>

Inspect the intended visual result

The panel fills small screens with a margin and stops growing on larger screens. Open index.html in your browser and compare it with that description. This is a schematic practice component; the example button has no application action attached.

Test narrow screens and keyboard use

Resize the browser to a narrow phone-like width and then back to desktop width. Look for text clipping and unwanted horizontal scrolling. Press Tab to reach the sample button; its focus indicator should remain visible. Increase browser zoom to 200% and confirm the main text can still be read.

Move the pattern into your component

Copy the .panel rule into the stylesheet for your recipe summaries. Replace .panel with your project’s actual component class so the rule is scoped. Keep the narrow-screen override and test with real text, translated text and empty content before publishing.