Question

我在1200px处创建了一个断点（当用户最小化浏览器窗口时）但是当内容达到1200px时，剩下一个空白区域。我希望在我的页面上填写其他内容，在我的CSS中公布的全局宽度为80％。我当前的格式适用于除此之外的所有其他页面和屏幕宽度。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>DB Plumbing | About</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://use.fontawesome.com/3a2264e344.js"></script>
  <script src="html9shiv.js"></script>
  <link rel="shortcut icon" type="image/png" href="wrench.png"/>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="desciption" content = "Darran Brady Plumbing">
  <meta name="keywords" content = "Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
  <meta name = "author" content ="DB, Darran, Brady, Darran Brady">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
function myFunction() {
 var x = document.getElementById("myTopnav");
 if (x.className === "topnav") {
 x.className += " responsive";
 } else {
 x.className = "topnav";
 }
}
</script>
</head>
  <body>
    <header>
      <div class="container">
        <div id="branding">
          <h1><span class="highlight">DB</span> Plumbing</h1>
        </div>
        <nav>
          <ul class="topnav" id="myTopnav">
            <li class="active"><a href="home9.html">Home</a></li>
            <li><a href="about9.html">About</a></li>
            <li><a href="services9.html">Services</a></li>
            <li><a href="coverage9.html">Coverage</a></li>
            <li><a href="contact9.html">Contact</a></li>
            <li class="icon">
 <a href="javascript:void(0);" style="font-size:140%;" onclick="myFunction()">☰</a>
        </li>
        </ul>
        </nav>
        </div>
        </header>

<div class="container">
      <div class="dark">
            <div class="callus"><a href="tel:+07756848657"><i class="fa fa-phone fa-2x" ></i></a></div>
 <h2>Our Story</h2>
            </div>
            </div>

<section id="main">
      <div class="container">

        <article id="main-col">
          <p>
            Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area.</p>

<div class="dark">

          <h3>What We Offer</h3>
            <ul>
            <li>Plumbing and Heating Services</li>
            <li>Gas Safe Registered: 202542</li>
            <li>VAT Registered</li>
            <li>25 years of expertise</li> <li>Plumbing and Heating Services</li>
            <li>Heating Engineer Qualified</li>
            <li>VAT Registered</li>
            <li>100% Satisfaction Garauntee</li>
            </ul>  
        </article>

        <aside id="sidebar">
          <div class="dark">
          <p>"98% Customer Satisfaction"</p>
           <a href="http://www.checkatrade.com/DBPlumbing/Reviews.aspx"><img class="catsmall" src="cat.png" alt="checkatradelogo" ></a>
          </div>
        </aside>
      </div>
    </section>
 <footer>
    <div>
      <p>Darren Brady Plumbing Copyright &copy; 2017</p>
      <p>Registered in England No. 4364232</p>
      </div>
    </footer>
  </body>
</html>

CSS（缩短，来自媒体q）

*minimised browser winddow */
@media(max-width: 1150px){
  header #branding,
  header nav,
  header nav li,
  #newsletter h1,
  #newsletter form,
  aside#sidebar{
    float:none;
    text-align:center;
    width:100%;
  }

main{
  width: 80%;
}







/* 768 tablet */
@media(max-width: 768px){
  header #branding,
  header nav,
  header nav li,
  #newsletter h1,
  #newsletter form,
  #boxes .box,
  article#main-col,
  aside#sidebar{
    float:none;
    width:100%;
  }

  header{
    padding-bottom:20px;
  }

#imagery {
  display: none;
}

  #showcase h1{
    font-size: 275%;  
  }

  #showcase p{
    font-size: 100%;
  }

  #newsletter button, .quote button{
    display:block;
    width:100%;
  }

  #newsletter form input[type="email"], .quote input, .quote textarea{
    width:100%;
    margin-bottom:5px;
  }

.col-25, .col-75 {
    width: 100%;
    margin-top: 0;
}


  /* nav */
 ul.topnav li {
  display: none;
}

ul.topnav li.icon {
 display: inline-block;
 }


ul.topnav.responsive {position: relative;}
 ul.topnav.responsive li.icon {
 position: absolute;
 right: 0;
 top: 0;
 }
 ul.topnav.responsive li {
 float: none;   /*  'un' float the list items so they return to displaying vertically */
 display: inline;
 }
 ul.topnav.responsive li a {
 display: block;
 text-align: left;
 }
}




/* 400 pixels mobile phone */
@media screen and (max-width: 480px){
  header #branding, header nav, header nav li {
    text-align: center;
    font-size: 100%
  }
  header ul{
  padding:10px;
  font-size: 100%;
  }

#social {
  font-size: 150%;
}



#imagery .box{
  size: 10px 10px;

}

当我达到断点（1200px）时，我的布局被打破了

0 个答案: