背景顏色未取全寬

-1

我正在處理我的投資組合，其中有三個部分標記。我已經爲整個身體宣佈了背景顏色，但是，我希望採用不同的顏色來拍攝全寬第二部分標籤 - 就像身體背景顏色一樣。背景顏色未取全寬

雖然我確實嘗試使用下面的代碼來實現該目標，但兩個部分標記的背景顏色並未佔滿整個頁面寬度。任何幫助，將不勝感激。

HTML

<html> 

<head> 
    <title>Srujan Sagar</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/main.css" type="text/css"> 
    <link href="https://fonts.googleapis.com/css?family=Lato|Pacifico|Raleway" rel="stylesheet"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head> 

<body> 

    <header> 
     Srujan Sagar 
    </header> 

    <section> 
     <p class="main-content"> 
      Hello! I'm an India-based self-taught FrontEnd Developer. 
      <br /> 
      <br /> I have a diverse set of skills, ranging from design, to HTML + CSS + Javascript, all the way to Django. 
     </p> 

     <img src="images/main_img.jpg" alt="my picture" width="140" class="logo" /> 

     <ul class="social-links"> 
      <li> 
       <a href="https://www.facebook.com/Srujan.SaGar" target="_blank"> 
        <span class="fa fa-facebook-square" style="font-size:32px;color:#A63A50"></span> 
       </a> 
      </li> 

      <li> 
       <a href="#" target="_blank"> 
        <span class="fa fa-github" style="font-size:34px;color:#A63A50"></span> 
       </a> 
      </li> 

      <li> 
       <a href="#" target="_blank"> 
        <span class="fa fa-linkedin-square" style="font-size:32px;color:#A63A50"></span> 
       </a> 
      </li> 
     </ul> 
     <br /> <br /> 
     <p class="line"></p> 
    </section> 

<nav class="main-content"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Projects</a></li> 
    <li><a href="#">Skills</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 

<section class="second-content"> 
    <h3>Hi there!</h3> 
</section> 
<section class="third-content"> 
    <h3>Hi there!</h3> 
</section> 
</body> 

</html>

CSS：

body { 
    /*background: url('../images/background_img.jp');*/ 
    background-color: #FFFAFB; 
    text-align: center; 
    font-family: 'Lato', sans-serif; 
} 

header { 
    font-family: 'Pacifico', sans-serif; 
    letter-spacing: 3px; 
    font-size: 90px; 
    padding-top: 10px; 
    color: #A63A50; 
    } 
.main-content { 
    font-size: 1.3em; 
    font-family: 'Raleway', sans-serif; 
    color: #CA7989; 
    width: 500px; 
    margin: 0 auto; 
    padding-top: 25px; 
} 
.logo { 
    border-radius: 50%; 
    border: 1px solid #CA7989; 
    margin: 30px 0 0 0; 
} 
.social-links { 
    margin: 25px 30px 0 0; 
} 
a { 
    text-decoration: none; 
    color: #CA7989; 
} 
li { 
    list-style-type: none; 
    display: inline; 
    margin: 0 10px 0 0; 
} 
.line { 
    max-width: 550px; 
    margin: 0 auto; 
    border-top: 1px solid #CA7989; 
} 

nav a:hover { 
    color: #A63A50; 
    background: #F5E6E6; 
} 

.second-content { 
    background:#ebebeb; 
    width: 100%; 
    height: 465px; 
} 
.third-content { 
    margin-top:-18px; 
    background:#CA7989; 
    width: 100%; 
    height: 465px; 
}

觀CodePen

來源

2017-04-19 user2035893

body { 
    /*background: url('../images/background_img.jp');*/ 
    background-color: #FFFAFB; 
    text-align: center; 
    font-family: 'Lato', sans-serif; 
    /* set margin and padding 0*/ 
    margin:0; 
    padding:0; 
}

來源

2017-04-19 14:45:31 AddcitedToLearn

margin: 0;

上面的代碼

在身上，這是默認的邊距。

來源

2017-04-19 14:45:55

也許清除體內margin和padding：

body { 
    background-color: #FFFAFB; 
    text-align: center; 
    font-family: 'Lato', sans-serif; 
    margin:0; 
    padding:0; 
}

來源

2017-04-19 14:46:04 abraham63

只需添加margin: 0;到body刪除默認保證金。

https://codepen.io/anon/pen/aWdwaG

來源

2017-04-19 14:46:26 Johannes

嘗試增加你的CSS的「身體」這個

background-size : cover;

：

body { 
     /*background: url('../images/background_img.jp');*/ 
     background-color: #FFFAFB; 
     text-align: center; 
     font-family: 'Lato', sans-serif; 
     background-size: cover; 
}

然後嘗試刪除你的身體的邊距和填充，並且應該這樣做！

你也應該看看這篇文章：https://css-tricks.com/perfect-full-page-background-image/

來源

2017-04-19 14:47:44 Nelson

不是必需的背景大小... 1.這是一個顏色，這樣是沒有用的。 2.I'ts只是在身體的邊緣.... – DaniP

我的壞@DaniP！我看到了這個URL，並認爲它是關於未來的背景圖片。 – Nelson

嗯，也許你是對的，這就是爲什麼我沒有downvoted這個，可以在以後有用的OP不要刪除它+1 – DaniP

背景顏色未取全寬

回答

相關問題