横幅を場所により変える。

要素によって横幅の長さを変えたいです。

現在、下記の通りになってます。
ボディ幅も指定されています。

このうち、文字に関して#pageで決めた横幅の範囲で左はし
画像は背景として、#pageの横幅の範囲超えて画面の端から端まで画像が届くようにしたいです。
どうしたらいいですか？
画像に対してwidth 100%もwidth autoなども試しましたが動きません。
これは#pageのcssも変えた方がいいでしょか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>サンプル</title>
6<link rel="stylesheet" href="sample.css">
7</head>
8<body>
9<div id="page">
10
11  <div class="main">
12
13</div>
14
15  <p class="left"><a href="#">１</a></p>
16  <p class="right"><a href="#">２</a></p>
17
18</div>
19
20</body>
21</html>

css
1body {
2  width: 100%;
3  text-align: center;
4}
5
6#page {
7  min-width: 930px;
8  margin: 0 auto;
9}
10
11.main {
12  max-width: initial;
13  position: relative;
14  background-image: url("../images/top.jpg");
15  background-size: cover;
16  box-sizing: border-box;
17  width: 100%;
18}
19
20.left {
21  text-align: left;
22  float: left;
23}
24
25.right {
26  text-align: right;
27  float: right;
28}