centered-content-with-margins.html
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Test: Centered Content with Margins</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 box-sizing: border-box; 12 } 13 body { 14 font-family: Arial, sans-serif; 15 background: #f5f5f5; 16 } 17 18 .container { 19 max-width: 900px; 20 margin: 0 auto; 21 background: white; 22 padding: 40px; 23 min-height: 800px; 24 } 25 26 /* For a 1440px viewport, 900px container = 270px margin on each side (~19% each) */ 27 28 h1 { 29 font-size: 36px; 30 margin-bottom: 20px; 31 color: #2c3e50; 32 } 33 34 p { 35 font-size: 18px; 36 line-height: 1.6; 37 margin-bottom: 16px; 38 color: #34495e; 39 } 40 41 .content-box { 42 background: #ecf0f1; 43 padding: 20px; 44 margin: 20px 0; 45 border-radius: 4px; 46 } 47 </style> 48 </head> 49 <body> 50 <main class="container"> 51 <h1>Centered Content Layout</h1> 52 <p>This page has significant whitespace margins on both sides that should be cropped.</p> 53 <p>The content container is centered with a max-width of 900px on a 1440px viewport.</p> 54 55 <div class="content-box"> 56 <h2>Professional Services</h2> 57 <p>We provide high-quality services with a clean, centered layout design.</p> 58 </div> 59 60 <div class="content-box"> 61 <h2>Why Choose Us</h2> 62 <p> 63 Our approach focuses on delivering exceptional results while maintaining professional 64 standards. 65 </p> 66 </div> 67 </main> 68 </body> 69 </html>