calcの使い方
- 要素の最大幅は
max-width: 600pxを指定 - 縮めた際に良き具合に余白が入ってほしい
-
width: calc(100% - 16px - 16px);を指定して余白ができるように設定する（margin: 0 auto;でセンター揃えは設定済み）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Advanced CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h1>テスト</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</section>
</body>
</html>
@charset "utf-8";
body {
margin: 0;
}
section {
background: pink;
max-width: 600px;
margin: 0 auto;
width: calc(100% - 16px - 16px);
}
h1 {
margin: 0;
}
p {
margin: 0;
}