首页 > 编程入门 文章详情

如何在下面添加另外两个全宽部分（CSS）(How to add another two full width sections below (CSS))

编程入门 行业动态 更新时间:2024-10-26 08:33:50
如何在下面添加另外两个全宽部分（CSS）(How to add another two full width sections below (CSS))

您好，我已经建立了一个投资组合网站，但对于我过去3天的生活，我无法在我的投资组合网格后添加全宽度的部分。

我真的在这一点上不确定我能做什么，并且真的很想听到你怎么可能在我的投资组合网格下面添加更多的全宽度部分！

这是网站：

http://hghazni.com/v2/index.html

和代码： 

body {
   margin: 0;
   padding: 0;
 }

body, html {
  margin: 0;
  font: 1em "Open Sans", Sans-serif;
}

.nav-main {
  position: fixed;
  z-index: 9999;
  width: 100%;
  background-color: #222;
  height: 5em;
  color: #fff;
}

.nav-main .logo {
  float: left;
  font-weight: bolder;
  height: 40px;
  padding: 15px 30px;
  font-size: 3.0em;
  line-height:35px
}

.under-logo {
  font-size: 1em;
  color: #fff;
  float: left;
  margin-top: 45px;
  margin-left: 55px;
  line-height:40px;
  position: absolute;
}

.nav-main > ul {
  margin: 0;
  padding: 0;
  float: right;
  font-size: 3em;
  font-weight: bold;
  list-style-type: none;
  padding-right: 30px;
}

.nav-main > ul > li {
  float: left;
}

.nav-item {
  display: inline-block;
  padding: 15px 20px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
}

.nav-item:hover {
  background-color: #444;
}

.title {
  height: 50em;
  position: relative;
  text-align: center;
  color: #fff;
  font-family: Open sans, Tahoma, Arial;
  background: url(http://hghazni.com/v2/img/flat_mountain_bg.jpg) no-repeat center center fixed;
  /*background-color: #ee712b;*/
  background-size: cover;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  overflow: visible;
  /*position: absolute;
  top: 20%;
  left: 30%;
  right: 30%*/

}

.title img {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
    /*margin: auto;*/
    /*width: 100%;*/
}
.title h1 {
  position: absolute;
  top:70%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#000;
  font-size: 4em;
  /*position: static;
  text-align: center;
  margin: auto;
  width: 70%;*/
}

.title h2 {
  /*background-color:#000;
  position: static;
  text-align: center;
  margin: auto;
  width: 80%;*/
  position: absolute;
  top:82.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#000;
  font-size: 2.5em;
}

.content {
  padding: 20px;
  top: 100%;
  left: 0;
  background-color: #fff;
  align-items: center;
  padding-bottom: 40px;
}

.content h1 {
  text-align: center;
  font-size: 8em;
  margin: auto;
  margin-top: 50px;
}
.content h3 {
  padding: 10px;
  font-size: 2.2em;
  font-weight: normal;
  width:80%;
  margin: auto;
}

.work-header {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 100%;
  height: 100%;
  left: 0;
  text-align: center;
  background-color: #343436;
}

/*Portfolio Header*/

.work-header h1 {
  font-size: 4.2em;
  color: #fff;
}

#brain {
  color: #e4c027;
}
#heart {
  color: #f90446
}
#soul {
  color: #6442e9
}

/*Portfolio Grid Section baby*/

.work {
  background-color: #fff;
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 8%;
  margin: 0;
  width: 92%;
  height: 100%;
  text-align: center;
}

.work h1 {
  padding-bottom: 2em;
  padding-right: 6em;
}

.box {
   float:left;
   position: relative;
   width: 28%;
   padding-left: 1%;
   padding-bottom: 1%;
   background-color: #fff;
}
.boxInner {
   position: relative;
   left: 20px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;
}
.boxInner img {
   width: 100%;
   overflow: auto;
}
.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: -50px;
   background: #000;
   background: rgba(0, 0, 0, 0.5);
   color: #FFF;
   padding: 10px;
   text-align: center;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 1em;
   height: 3em;
   padding-top: 1em;
   font-size: 2em;
   font-weight: bold;
}

   /*contact page*/

.work .parent {
  position: relative;
  padding-top: 50px;
}

.work .parent .contact {}

.work .parent .contact h1 {
  text-align: center;
}

.work .parent .contact h4 {
  color: #000;
  text-align: center;
  font-size: 50px;
}
/*contact form*/

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box {
      width: 100%;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 25%;
      padding-bottom: 25%;
   }

<!--[if lt IE 9]>
   <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

.footer {
  background-color: #2d2c2c;
  width: 100%;
  height: 100%;
  position: relative;
  padding-left: 20em;
  text-align: center;
  font-size: 200px;
} 
  
<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Haroon Ghazni</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="stylesheet.css">
      <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
  </head>

    <body class="no-touch">
    <nav class="nav-main">
      <div class="logo">HGHAZNI</div>
      <div class="under-logo">WEB/UI/UX/GRAPHIC</div>
      <ul>
        <li>
          <a href="#about" class="nav-item">About</a>
        </li>
        <li>
          <a href="#work" class="nav-item">Work</a>
        </li>
        <li>
          <a href="#contact" class="nav-item">Contact</a>
        </li>
      </ul>
    </nav>
    <div class="title" >
      <img src="img/hg_avatar.png" alt="Haroon Ghazni" />
        <h1>I’m Haroon Ghazni.</h1>
        <h2>A Web Designer from the little big city of Nottingham.</h2>
    </div>
    <div class="content" id="about">
        <h1>Who?</h1>
        <h3>I am a dynamic and creative web designer with experience of working on international brands in a fast paced collaborative environment.</h3>
        <h3>As a hands on individual who isn’t afraid of a pen and paper I work through the full UX lifecycle from research to design and testing utilising all elements of a user centred design process to create innovative cross platform experiences.</h3>
        <h3>I enjoy learning new skills as well as playing an active part in the design community.</h3>
    </div>
    <div class="work-header" id="work">
        <h1>My Work – <span id="brain">Brain</span>,<span id="heart"> Heart</span> and <span id="soul">Soul.</span></h1>
    </div>
    <div class="work">
      <!-- <h1> me wurk </h1> -->

       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port1.jpg" />
           <div class="titleBox">Butterfly</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port2.jpg" />
           <div class="titleBox">La Pura Vida</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port3.jpg" />
           <div class="titleBox">Bohemian Purple</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port4.jpg" />
           <div class="titleBox">Lost in Innocence</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port5.jpg" />
           <div class="titleBox">Cerebral Experience</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port6.jpg" />
           <div class="titleBox">Mario Escort</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port7.jpg" />
           <div class="titleBox">Restaurant iOS App</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port8.jpg" />
           <div class="titleBox">Nottingham Sober Yaught Dragons</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port9.jpg" />
           <div class="titleBox">Poet Farmer</div>
         </div>
       </div>
      <div class="parent">

       <div class="contact" id="contact">
          <h1>Do not hesitate to get in touch</h1>
          <h4>hghazni@gmail.com</h4>
          <p> HEY HEY HEY asdasdas dasdasda sdad</p>
       </div>
     </div>

       </div>

    <div class="footer">
         <h1> footer </h1>
     </div>
</body>


</html> 
  
 

 

 我非常感谢任何支持！ 谢谢 ：） 
Hi there I've built a portfolio website but for the life of me for the past 3 days I haven't been able to added full-width sections after my portfolio grid.
 

I'm really at this point not sure what more I can do and would really love to hear from you how can I possibly add further full-width sections below my portfolio grid!
 

Here's the website:
 

http://hghazni.com/v2/index.html
 

And the code:
 

 
 
  
  
body {
   margin: 0;
   padding: 0;
 }

body, html {
  margin: 0;
  font: 1em "Open Sans", Sans-serif;
}

.nav-main {
  position: fixed;
  z-index: 9999;
  width: 100%;
  background-color: #222;
  height: 5em;
  color: #fff;
}

.nav-main .logo {
  float: left;
  font-weight: bolder;
  height: 40px;
  padding: 15px 30px;
  font-size: 3.0em;
  line-height:35px
}

.under-logo {
  font-size: 1em;
  color: #fff;
  float: left;
  margin-top: 45px;
  margin-left: 55px;
  line-height:40px;
  position: absolute;
}

.nav-main > ul {
  margin: 0;
  padding: 0;
  float: right;
  font-size: 3em;
  font-weight: bold;
  list-style-type: none;
  padding-right: 30px;
}

.nav-main > ul > li {
  float: left;
}

.nav-item {
  display: inline-block;
  padding: 15px 20px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
}

.nav-item:hover {
  background-color: #444;
}

.title {
  height: 50em;
  position: relative;
  text-align: center;
  color: #fff;
  font-family: Open sans, Tahoma, Arial;
  background: url(http://hghazni.com/v2/img/flat_mountain_bg.jpg) no-repeat center center fixed;
  /*background-color: #ee712b;*/
  background-size: cover;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  overflow: visible;
  /*position: absolute;
  top: 20%;
  left: 30%;
  right: 30%*/

}

.title img {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
    /*margin: auto;*/
    /*width: 100%;*/
}
.title h1 {
  position: absolute;
  top:70%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#000;
  font-size: 4em;
  /*position: static;
  text-align: center;
  margin: auto;
  width: 70%;*/
}

.title h2 {
  /*background-color:#000;
  position: static;
  text-align: center;
  margin: auto;
  width: 80%;*/
  position: absolute;
  top:82.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#000;
  font-size: 2.5em;
}

.content {
  padding: 20px;
  top: 100%;
  left: 0;
  background-color: #fff;
  align-items: center;
  padding-bottom: 40px;
}

.content h1 {
  text-align: center;
  font-size: 8em;
  margin: auto;
  margin-top: 50px;
}
.content h3 {
  padding: 10px;
  font-size: 2.2em;
  font-weight: normal;
  width:80%;
  margin: auto;
}

.work-header {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 100%;
  height: 100%;
  left: 0;
  text-align: center;
  background-color: #343436;
}

/*Portfolio Header*/

.work-header h1 {
  font-size: 4.2em;
  color: #fff;
}

#brain {
  color: #e4c027;
}
#heart {
  color: #f90446
}
#soul {
  color: #6442e9
}

/*Portfolio Grid Section baby*/

.work {
  background-color: #fff;
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 8%;
  margin: 0;
  width: 92%;
  height: 100%;
  text-align: center;
}

.work h1 {
  padding-bottom: 2em;
  padding-right: 6em;
}

.box {
   float:left;
   position: relative;
   width: 28%;
   padding-left: 1%;
   padding-bottom: 1%;
   background-color: #fff;
}
.boxInner {
   position: relative;
   left: 20px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;
}
.boxInner img {
   width: 100%;
   overflow: auto;
}
.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: -50px;
   background: #000;
   background: rgba(0, 0, 0, 0.5);
   color: #FFF;
   padding: 10px;
   text-align: center;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 1em;
   height: 3em;
   padding-top: 1em;
   font-size: 2em;
   font-weight: bold;
}

   /*contact page*/

.work .parent {
  position: relative;
  padding-top: 50px;
}

.work .parent .contact {}

.work .parent .contact h1 {
  text-align: center;
}

.work .parent .contact h4 {
  color: #000;
  text-align: center;
  font-size: 50px;
}
/*contact form*/

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box {
      width: 100%;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 25%;
      padding-bottom: 25%;
   }

<!--[if lt IE 9]>
   <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

.footer {
  background-color: #2d2c2c;
  width: 100%;
  height: 100%;
  position: relative;
  padding-left: 20em;
  text-align: center;
  font-size: 200px;
} 
  
<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Haroon Ghazni</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="stylesheet.css">
      <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
  </head>

    <body class="no-touch">
    <nav class="nav-main">
      <div class="logo">HGHAZNI</div>
      <div class="under-logo">WEB/UI/UX/GRAPHIC</div>
      <ul>
        <li>
          <a href="#about" class="nav-item">About</a>
        </li>
        <li>
          <a href="#work" class="nav-item">Work</a>
        </li>
        <li>
          <a href="#contact" class="nav-item">Contact</a>
        </li>
      </ul>
    </nav>
    <div class="title" >
      <img src="img/hg_avatar.png" alt="Haroon Ghazni" />
        <h1>I’m Haroon Ghazni.</h1>
        <h2>A Web Designer from the little big city of Nottingham.</h2>
    </div>
    <div class="content" id="about">
        <h1>Who?</h1>
        <h3>I am a dynamic and creative web designer with experience of working on international brands in a fast paced collaborative environment.</h3>
        <h3>As a hands on individual who isn’t afraid of a pen and paper I work through the full UX lifecycle from research to design and testing utilising all elements of a user centred design process to create innovative cross platform experiences.</h3>
        <h3>I enjoy learning new skills as well as playing an active part in the design community.</h3>
    </div>
    <div class="work-header" id="work">
        <h1>My Work – <span id="brain">Brain</span>,<span id="heart"> Heart</span> and <span id="soul">Soul.</span></h1>
    </div>
    <div class="work">
      <!-- <h1> me wurk </h1> -->

       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port1.jpg" />
           <div class="titleBox">Butterfly</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port2.jpg" />
           <div class="titleBox">La Pura Vida</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port3.jpg" />
           <div class="titleBox">Bohemian Purple</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port4.jpg" />
           <div class="titleBox">Lost in Innocence</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port5.jpg" />
           <div class="titleBox">Cerebral Experience</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port6.jpg" />
           <div class="titleBox">Mario Escort</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port7.jpg" />
           <div class="titleBox">Restaurant iOS App</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port8.jpg" />
           <div class="titleBox">Nottingham Sober Yaught Dragons</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port9.jpg" />
           <div class="titleBox">Poet Farmer</div>
         </div>
       </div>
      <div class="parent">

       <div class="contact" id="contact">
          <h1>Do not hesitate to get in touch</h1>
          <h4>hghazni@gmail.com</h4>
          <p> HEY HEY HEY asdasdas dasdasda sdad</p>
       </div>
     </div>

       </div>

    <div class="footer">
         <h1> footer </h1>
     </div>
</body>


</html> 
  
 

 

I really appreciate any support! Thank you :)

                
最满意答案

                
                    
                        
 我对您的代码进行了以下更改 
 
 
  从工作div中取出父div并使其宽度为100％  
  从h1移除了填充权。  
  移动.footer类并在.parent类样式之后立即添加。  
  删除填充左：20em; 和.footer类的大字号。  
 

 最重要的是你在css文件中添加了条件注释，这是无效的。 这应该被添加到Html页面。 头部标签内 
 

 我认为这解决了你所有的问题:) 
 

 
 
  
  
body {
   margin: 0;
   padding: 0;
 }

body, html {
  margin: 0;
  font: 1em "Open Sans", Sans-serif;
}

.nav-main {
  position: fixed;
  z-index: 9999;
  width: 100%;
  background-color: #222;
  height: 5em;
  color: #fff;
}

.nav-main .logo {
  float: left;
  font-weight: bolder;
  height: 40px;
  padding: 15px 30px;
  font-size: 3.0em;
  line-height:35px
}

.under-logo {
  font-size: 1em;
  color: #fff;
  float: left;
  margin-top: 45px;
  margin-left: 55px;
  line-height:40px;
  position: absolute;
}

.nav-main > ul {
  margin: 0;
  padding: 0;
  float: right;
  font-size: 3em;
  font-weight: bold;
  list-style-type: none;
  padding-right: 30px;
}

.nav-main > ul > li {
  float: left;
}

.nav-item {
  display: inline-block;
  padding: 15px 20px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
}

.nav-item:hover {
  background-color: #444;
}

.title {
  height: 50em;
  position: relative;
  text-align: center;
  color: #fff;
  font-family: Open sans, Tahoma, Arial;
  background: url(http://hghazni.com/v2/img/flat_mountain_bg.jpg) no-repeat center center fixed;
  /*background-color: #ee712b;*/
  background-size: cover;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  overflow: visible;
  /*position: absolute;
  top: 20%;
  left: 30%;
  right: 30%*/

}

.title img {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
    /*margin: auto;*/
    /*width: 100%;*/
}
.title h1 {
  position: absolute;
  top:70%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#000;
  font-size: 4em;
  /*position: static;
  text-align: center;
  margin: auto;
  width: 70%;*/
}

.title h2 {
  /*background-color:#000;
  position: static;
  text-align: center;
  margin: auto;
  width: 80%;*/
  position: absolute;
  top:82.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#000;
  font-size: 2.5em;
}

.content {
  padding: 20px;
  top: 100%;
  left: 0;
  background-color: #fff;
  align-items: center;
  padding-bottom: 40px;
}

.content h1 {
  text-align: center;
  font-size: 8em;
  margin: auto;
  margin-top: 50px;
}
.content h3 {
  padding: 10px;
  font-size: 2.2em;
  font-weight: normal;
  width:80%;
  margin: auto;
}

.work-header {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 100%;
  height: 100%;
  left: 0;
  text-align: center;
  background-color: #343436;
}

/*Portfolio Header*/

.work-header h1 {
  font-size: 4.2em;
  color: #fff;
}

#brain {
  color: #e4c027;
}
#heart {
  color: #f90446
}
#soul {
  color: #6442e9
}

/*Portfolio Grid Section baby*/

.work {
  background-color: #fff;
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 8%;
  margin: 0;
  width: 92%;
  height: 100%;
  text-align: center;
}

.work h1 {
  padding-bottom: 2em;
  padding-right: 6em;
}

.box {
   float:left;
   position: relative;
   width: 28%;
   padding-left: 1%;
   padding-bottom: 1%;
   background-color: #fff;
}
.boxInner {
   position: relative;
   left: 20px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;
}
.boxInner img {
   width: 100%;
   overflow: auto;
}
.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: -50px;
   background: #000;
   background: rgba(0, 0, 0, 0.5);
   color: #FFF;
   padding: 10px;
   text-align: center;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 1em;
   height: 3em;
   padding-top: 1em;
   font-size: 2em;
   font-weight: bold;
}

   /*contact page*/

.parent {
  position: relative;
  padding-top: 50px;
  width: 100%;
  float: left;
}

.parent .contact {
  text-align: center;
}

.parent .contact h1 {      
  padding: 0;
}

.work .parent .contact h4 {
  color: #000;
  text-align: center;
  font-size: 50px;
}
/*contact form*/

.footer {
   background-color: #2d2c2c;
   width: 100%;
   height: 100%;
   position: relative;
   text-align: center;
   clear: both;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box {
      width: 100%;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 25%;
      padding-bottom: 25%;
   }    
  
<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Haroon Ghazni</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="stylesheet.css">
      <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
 <!--[if lt IE 9]>
   <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
  </head>

    <body class="no-touch">
    <nav class="nav-main">
      <div class="logo">HGHAZNI</div>
      <div class="under-logo">WEB/UI/UX/GRAPHIC</div>
      <ul>
        <li>
          <a href="#about" class="nav-item">About</a>
        </li>
        <li>
          <a href="#work" class="nav-item">Work</a>
        </li>
        <li>
          <a href="#contact" class="nav-item">Contact</a>
        </li>
      </ul>
    </nav>
    <div class="title" >
      <img src="img/hg_avatar.png" alt="Haroon Ghazni" />
        <h1>I’m Haroon Ghazni.</h1>
        <h2>A Web Designer from the little big city of Nottingham.</h2>
    </div>
    <div class="content" id="about">
        <h1>Who?</h1>
        <h3>I am a dynamic and creative web designer with experience of working on international brands in a fast paced collaborative environment.</h3>
        <h3>As a hands on individual who isn’t afraid of a pen and paper I work through the full UX lifecycle from research to design and testing utilising all elements of a user centred design process to create innovative cross platform experiences.</h3>
        <h3>I enjoy learning new skills as well as playing an active part in the design community.</h3>
    </div>
    <div class="work-header" id="work">
        <h1>My Work – <span id="brain">Brain</span>,<span id="heart"> Heart</span> and <span id="soul">Soul.</span></h1>
    </div>
    <div class="work">
      <!-- <h1> me wurk </h1> -->

       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port1.jpg" />
           <div class="titleBox">Butterfly</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port2.jpg" />
           <div class="titleBox">La Pura Vida</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port3.jpg" />
           <div class="titleBox">Bohemian Purple</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port4.jpg" />
           <div class="titleBox">Lost in Innocence</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port5.jpg" />
           <div class="titleBox">Cerebral Experience</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port6.jpg" />
           <div class="titleBox">Mario Escort</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port7.jpg" />
           <div class="titleBox">Restaurant iOS App</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port8.jpg" />
           <div class="titleBox">Nottingham Sober Yaught Dragons</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port9.jpg" />
           <div class="titleBox">Poet Farmer</div>
         </div>
       </div>
       </div>
<div class="parent">

       <div class="contact" id="contact">
          <h1>Do not hesitate to get in touch</h1>
          <h4>hghazni@gmail.com</h4>
          <p> HEY HEY HEY asdasdas dasdasda sdad</p>
       </div>
     </div>

    <div class="footer">
         <h1> footer </h1>
     </div>
</body>


</html> 
  
 

I did following changes to your code
 
 
 Took out the parent div from work div and made it 100% width  
 Removed the padding-right from the h1.  
 Moved up the .footer class and added right after the .parent class styles. 
 Removed padding-left: 20em; and the big font size from .footer class. 
 

And the most important thing is that you have added conditional comment inside css file which is not valid. This should be added in Html page. inside head tag
 

I think this solves all of your problems :)
 

 
 
  
  
body {
   margin: 0;
   padding: 0;
 }

body, html {
  margin: 0;
  font: 1em "Open Sans", Sans-serif;
}

.nav-main {
  position: fixed;
  z-index: 9999;
  width: 100%;
  background-color: #222;
  height: 5em;
  color: #fff;
}

.nav-main .logo {
  float: left;
  font-weight: bolder;
  height: 40px;
  padding: 15px 30px;
  font-size: 3.0em;
  line-height:35px
}

.under-logo {
  font-size: 1em;
  color: #fff;
  float: left;
  margin-top: 45px;
  margin-left: 55px;
  line-height:40px;
  position: absolute;
}

.nav-main > ul {
  margin: 0;
  padding: 0;
  float: right;
  font-size: 3em;
  font-weight: bold;
  list-style-type: none;
  padding-right: 30px;
}

.nav-main > ul > li {
  float: left;
}

.nav-item {
  display: inline-block;
  padding: 15px 20px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
}

.nav-item:hover {
  background-color: #444;
}

.title {
  height: 50em;
  position: relative;
  text-align: center;
  color: #fff;
  font-family: Open sans, Tahoma, Arial;
  background: url(http://hghazni.com/v2/img/flat_mountain_bg.jpg) no-repeat center center fixed;
  /*background-color: #ee712b;*/
  background-size: cover;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  overflow: visible;
  /*position: absolute;
  top: 20%;
  left: 30%;
  right: 30%*/

}

.title img {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
    /*margin: auto;*/
    /*width: 100%;*/
}
.title h1 {
  position: absolute;
  top:70%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#000;
  font-size: 4em;
  /*position: static;
  text-align: center;
  margin: auto;
  width: 70%;*/
}

.title h2 {
  /*background-color:#000;
  position: static;
  text-align: center;
  margin: auto;
  width: 80%;*/
  position: absolute;
  top:82.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#000;
  font-size: 2.5em;
}

.content {
  padding: 20px;
  top: 100%;
  left: 0;
  background-color: #fff;
  align-items: center;
  padding-bottom: 40px;
}

.content h1 {
  text-align: center;
  font-size: 8em;
  margin: auto;
  margin-top: 50px;
}
.content h3 {
  padding: 10px;
  font-size: 2.2em;
  font-weight: normal;
  width:80%;
  margin: auto;
}

.work-header {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 100%;
  height: 100%;
  left: 0;
  text-align: center;
  background-color: #343436;
}

/*Portfolio Header*/

.work-header h1 {
  font-size: 4.2em;
  color: #fff;
}

#brain {
  color: #e4c027;
}
#heart {
  color: #f90446
}
#soul {
  color: #6442e9
}

/*Portfolio Grid Section baby*/

.work {
  background-color: #fff;
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 8%;
  margin: 0;
  width: 92%;
  height: 100%;
  text-align: center;
}

.work h1 {
  padding-bottom: 2em;
  padding-right: 6em;
}

.box {
   float:left;
   position: relative;
   width: 28%;
   padding-left: 1%;
   padding-bottom: 1%;
   background-color: #fff;
}
.boxInner {
   position: relative;
   left: 20px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;
}
.boxInner img {
   width: 100%;
   overflow: auto;
}
.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: -50px;
   background: #000;
   background: rgba(0, 0, 0, 0.5);
   color: #FFF;
   padding: 10px;
   text-align: center;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 1em;
   height: 3em;
   padding-top: 1em;
   font-size: 2em;
   font-weight: bold;
}

   /*contact page*/

.parent {
  position: relative;
  padding-top: 50px;
  width: 100%;
  float: left;
}

.parent .contact {
  text-align: center;
}

.parent .contact h1 {      
  padding: 0;
}

.work .parent .contact h4 {
  color: #000;
  text-align: center;
  font-size: 50px;
}
/*contact form*/

.footer {
   background-color: #2d2c2c;
   width: 100%;
   height: 100%;
   position: relative;
   text-align: center;
   clear: both;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box {
      width: 100%;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 25%;
      padding-bottom: 25%;
   }    
  
<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Haroon Ghazni</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="stylesheet.css">
      <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
 <!--[if lt IE 9]>
   <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
  </head>

    <body class="no-touch">
    <nav class="nav-main">
      <div class="logo">HGHAZNI</div>
      <div class="under-logo">WEB/UI/UX/GRAPHIC</div>
      <ul>
        <li>
          <a href="#about" class="nav-item">About</a>
        </li>
        <li>
          <a href="#work" class="nav-item">Work</a>
        </li>
        <li>
          <a href="#contact" class="nav-item">Contact</a>
        </li>
      </ul>
    </nav>
    <div class="title" >
      <img src="img/hg_avatar.png" alt="Haroon Ghazni" />
        <h1>I’m Haroon Ghazni.</h1>
        <h2>A Web Designer from the little big city of Nottingham.</h2>
    </div>
    <div class="content" id="about">
        <h1>Who?</h1>
        <h3>I am a dynamic and creative web designer with experience of working on international brands in a fast paced collaborative environment.</h3>
        <h3>As a hands on individual who isn’t afraid of a pen and paper I work through the full UX lifecycle from research to design and testing utilising all elements of a user centred design process to create innovative cross platform experiences.</h3>
        <h3>I enjoy learning new skills as well as playing an active part in the design community.</h3>
    </div>
    <div class="work-header" id="work">
        <h1>My Work – <span id="brain">Brain</span>,<span id="heart"> Heart</span> and <span id="soul">Soul.</span></h1>
    </div>
    <div class="work">
      <!-- <h1> me wurk </h1> -->

       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port1.jpg" />
           <div class="titleBox">Butterfly</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port2.jpg" />
           <div class="titleBox">La Pura Vida</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port3.jpg" />
           <div class="titleBox">Bohemian Purple</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port4.jpg" />
           <div class="titleBox">Lost in Innocence</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port5.jpg" />
           <div class="titleBox">Cerebral Experience</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port6.jpg" />
           <div class="titleBox">Mario Escort</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port7.jpg" />
           <div class="titleBox">Restaurant iOS App</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port8.jpg" />
           <div class="titleBox">Nottingham Sober Yaught Dragons</div>
         </div>
       </div>
       <div class="box">
         <div class="boxInner">
           <img src="http://hghazni.com/v2/img/port9.jpg" />
           <div class="titleBox">Poet Farmer</div>
         </div>
       </div>
       </div>
<div class="parent">

       <div class="contact" id="contact">
          <h1>Do not hesitate to get in touch</h1>
          <h4>hghazni@gmail.com</h4>
          <p> HEY HEY HEY asdasdas dasdasda sdad</p>
       </div>
     </div>

    <div class="footer">
         <h1> footer </h1>
     </div>
</body>


</html>

更多推荐

本文发布于:2023-08-06 23:56:00，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1457474.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：两个   如何在   CSS   add   width

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表