把你看到的 margin:0 10% 0 10% 拿掉就好了。

其實你的css架構看的有點花花的。可能你不是很專門的。

不過你會被撐大的原因就是你那一段

#wrapper {
    /* width: 100%; */
    position: relative;
    background: #FFF;
    margin: 0 10px 0 10px; 
    box-shadow: 0px 0px 150px 0px rgba(0,0,0,0.15);
    border: solid 1px #82A7AD;
    border-top: 0;
}

大約看了一下其實主要原因是因為你並沒將元件給與固定的元素寬度。所以其預設會出現100%。然後再加上你的margin左右10%。就變成了120%的寬度。難怪會被撐大。

給你一個修改的方式

#wrapper {
    width: 80%;
    position: relative;
    background: #FFF;
    margin: 0 auto; 
    box-shadow: 0px 0px 150px 0px rgba(0,0,0,0.15);
    border: solid 1px #82A7AD;
    border-top: 0;
}

你的div#page、div#content的寬度太大，
超過了div#wrapper的寬度，
你那樣設 margin 某種程度上可以達到你要的效果，也不用設寬度。
不曉得這樣有沒有回答道你的問題

BTW，你是在練習 margin的詳細設定嗎?

margin: 0 10% 0 10%; /*上右下左*/
/* 你可以簡寫成  */
margin: 0 10%; /*(上下) (左右)*/

來看一下【金魚都能懂的網頁設計入門】這個系列的教學你應該問題會少掉很多
https://ithelp.ithome.com.tw/users/20112550/ironman/2072