如何使用CSS在我的網站上獲得浮動利潤？

Question

在我的網站上，我有一個固定寬度的中央包裝紙，我不想更改其大小，但是我確實希望根據用戶屏幕的大小來調整邊距的大小。 我嘗試將所有內容包裝在一個稱為wrapper-outer的div中，然后將其居中對齊：0自動，但它似乎不起作用。

網站： http ： //antonpug.com/mainepark/

CSS：

    body {
    font-family: "Nobile", sans-serif;
    font-size:0.75em;
    text-align:center;
    min-width:1550px;
}

img#bg {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

h3 {
    font-size:1.25em;
}

header h1, header h2 {
    font-family: "Ubuntu", sans-serif;
}

header h1 {
    font-size:3em;
    margin:25px 0 0 0;
}

header h2 {
    font-size:2em;
    margin:0 0 25px 0;
}

#wrapper-inner {
    margin:25px 100px 25px 100px;
    padding:15px 0 15px 0;
    background-color:rgba(255,255,255,0.75);
    moz-border-radius: 10px;
    webkit-border-radius: 10px;
    border-radius: 10px;
}

#wrapper-outer {
    width:1500px; -- that didn't work either!!!
    margin: 0px auto;
}

#feature {
    display:inline-block;
    width:80%;
    margin:15px;
}

.column {
    display: inline-block;
    vertical-align:top;
    width:600px;
    margin:15px;
}

#col-1 {
    text-align:right;
}

#col-2 {
    text-align:left;
}

.section {
    margin:0 0 25px 0;
    height:450px;
}

footer {
    color:#909090;
}

footer a {
    margin: 0 0 25px 0;
    text-decoration:none;
    color:#909090;
}

Answer 1

您需要向居中的包裝器添加固定寬度。

Answer 2

去除身體的最小寬度。 如果主體的最小寬度大於內容包裝，則將在流體邊距開始工作之前顯示滾動條。

將div#wrapper-inner的邊距更改為：

margin: 25px 0; //previous values had 100px margins for left/right which add to width per box model

最后，像建議的SLaks一樣，將div#wrapper-outer調整為內容的寬度。

Answer 3

只需向您的col-1 div添加一個百分比保證金，這樣您的保證金就可以col-1調整。

大約8%看起來不錯。

的CSS

#col-1 {
 margin-right: 8%;
}

另外，刪除col-2 div上的保證金聲明，以便保證金按比例調整。