javascript - 出现右侧间隙的响应式网格

Question

您好，我已经尝试开发骨架框架并调整了网格设计。虽然一切都慢慢落实到位，但我无法找到右侧的这个小差距来自哪里。请参阅下图了解我的意思。我附上了 CSS 和 HTML 页面。为 CSS 的困惑道歉，它的三个样式表合二为一。任何建议都很好，因为我觉得此时我可能看不到穿过森林的树木。

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}
/* For devices larger than 400px */

@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
}
/* For devices larger than 550px */

@media (min-width: 1050px) {
  .container {
    width: 80%;
  }
  .column,
  .columns {
    margin-left: 0;
  }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }
  .one.column,
  .one.columns {
    width: 8.333%;
  }
  .two.columns {
    width: 16.66%;
  }
  .three.columns {
    width: 25%;
  }
  .four.columns {
    width: 33.33%;
  }
  .five.columns {
    width: 41.66%;
  }
  .six.columns {
    width: 50%;
  }
  .seven.columns {
    width: 58.33%;
  }
  .eight.columns {
    width: 66.663%;
  }
  .nine.columns {
    width: 75%;
  }
  .ten.columns {
    width: 83.33%;
  }
  .eleven.columns {
    width: 91.66%;
  }
  .twelve.columns {
    width: 100%;
    margin-left: 0;
  }
  .one-third.column {
    width: 30.6666666667%;
  }
  .two-thirds.column {
    width: 65.3333333333%;
  }
  .one-half.column {
    width: 48%;
  }
  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns {
    margin-left: 8.66666666667%;
  }
  .offset-by-two.column,
  .offset-by-two.columns {
    margin-left: 17.3333333333%;
  }
  .offset-by-three.column,
  .offset-by-three.columns {
    margin-left: 26%;
  }
  .offset-by-four.column,
  .offset-by-four.columns {
    margin-left: 34.6666666667%;
  }
  .offset-by-five.column,
  .offset-by-five.columns {
    margin-left: 43.3333333333%;
  }
  .offset-by-six.column,
  .offset-by-six.columns {
    margin-left: 52%;
  }
  .offset-by-seven.column,
  .offset-by-seven.columns {
    margin-left: 60.6666666667%;
  }
  .offset-by-eight.column,
  .offset-by-eight.columns {
    margin-left: 69.3333333333%;
  }
  .offset-by-nine.column,
  .offset-by-nine.columns {
    margin-left: 78.0%;
  }
  .offset-by-ten.column,
  .offset-by-ten.columns {
    margin-left: 86.6666666667%;
  }
  .offset-by-eleven.column,
  .offset-by-eleven.columns {
    margin-left: 95.3333333333%;
  }
  .offset-by-one-third.column,
  .offset-by-one-third.columns {
    margin-left: 34.6666666667%;
  }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns {
    margin-left: 69.3333333333%;
  }
  .offset-by-one-half.column,
  .offset-by-one-half.columns {
    margin-left: 52%;
  }
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */

html {
  font-size: 62.5%;
}
body {
  font-size: 1.5em;
  /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300;
}
h1 {
  font-size: 4.0rem;
  line-height: 1.2;
  letter-spacing: -.1rem;
}
h2 {
  font-size: 3.6rem;
  line-height: 1.25;
  letter-spacing: -.1rem;
}
h3 {
  font-size: 3.0rem;
  line-height: 1.3;
  letter-spacing: -.1rem;
}
h4 {
  font-size: 2.4rem;
  line-height: 1.35;
  letter-spacing: -.08rem;
}
h5 {
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: -.05rem;
}
h6 {
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0;
}
/* Larger than phablet */

@media (min-width: 550px) {
  h1 {
    font-size: 5.0rem;
  }
  h2 {
    font-size: 4.2rem;
  }
  h3 {
    font-size: 3.6rem;
  }
  h4 {
    font-size: 3.0rem;
  }
  h5 {
    font-size: 2.4rem;
  }
  h6 {
    font-size: 1.5rem;
  }
}
p {
  margin-top: 0;
}
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */

a {
  color: #1EAEDB;
}
a:hover {
  color: #0FA0CE;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0;
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB;
}
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px;
  /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0;
}
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
}
fieldset {
  padding: 0;
  border-width: 0;
}
input[type="checkbox"],
input[type="radio"] {
  display: inline;
}
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal;
}
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */

ul {
  list-style: circle inside;
}
ol {
  list-style: decimal inside;
}
ol,
ul {
  padding-left: 0;
  margin-top: 0;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%;
}
/*li {
 margin-bottom: 1rem; }*/

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */

code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px;
}
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */

th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1;
}
th:first-child,
td:first-child {
  padding-left: 0;
}
th:last-child,
td:last-child {
  padding-right: 0;
}
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

button,
.button {
  margin-bottom: 1rem;
}
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem;
}
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.u-full-width {
  width: 100%;
  box-sizing: border-box;
}
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
}
.u-pull-right {
  float: right;
}
.u-pull-left {
  float: left;
}
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */

hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1;
}
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */

.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}
/* Navigation Bar
-------------------------------------------------- */

/* Remove margins and padding from the list, and add a black background color */

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
/* Float the list items side by side */

ul.topnav li {
  float: left;
}
/* Style the links inside the list items */

ul.topnav li a {
  display: inline-block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
/* Change background color of links on hover */

ul.topnav li a:hover {
  background-color: #111;
}
/* Hide the list item that contains the link that should open and close the topnav on small screens */

ul.topnav li.icon {
  display: none;
}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */

@media screen and (max-width: 680px) {
  ul.topnav li:not(:first-child) {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */

@media screen and (max-width: 680px) {
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */

@media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */

@media (min-width: 550px) {}
/* Larger than tablet */

@media (min-width: 750px) {}
/* Larger than desktop */

@media (min-width: 1000px) {}
/* Larger than Desktop HD */

@media (min-width: 1200px) {} .full-width-container {
  width:100%;
  max-width:100%;
  clear:both;
  margin:0 auto;
}
/* CSS Document */

.cBox {
  border-right:2px #DADADA solid;
}
.cBoxCenter {
  text-align:center;
  border-right:2px #DADADA solid;
  padding:1%;
}
.cBoxMain {
  border-top:2px #DADADA solid;
}
.cBoxEnd {
  text-align: center;
}
button {
  color: white;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff6e00+0,cc0600+100 */
  background: #ff6e00;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ff6e00 0%, #cc0600 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ff6e00 0%, #cc0600 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ff6e00 0%, #cc0600 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff6e00', endColorstr='#cc0600', GradientType=0);
  /* IE6-9 */
  border: 0;
}
.content {
  background-image: url(../img/hbg.png);
}
.subcontent {
  background-image: url(../img/hbg.png);
}
.columns img {
  max-width: 100%;
}
.content .columns {
  padding: 2%;
}
.columns {} .row {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.fillimage {
  background-image: url(../img/ldn.jpg);
  background-position: center;
  background-size: cover;
}
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,700,700italic);

/* CSS Document */

html,
body {
  background-image: url(../img/bg.png);
  font-family: 'Open Sans', sans-serif;
  height: 100%;
}
.head {
  background-image: url(../img/hbg.png);
}
.head img {
  max-width: 100%;
}
.logo {
  padding: 2rem;
}
.logo img {
  display: block;
  margin: auto;
  display: block;
  margin: auto;
  float: left;
  max-height: 100%;
}
.headerimage {} .headerimage img {
  display: block;
  margin: auto;
  float: left;
  max-height: 100%;
}
/* ----- Contract Form ---- */

#form {
  min-width: 300px;
  max-width: 600px;
  margin: auto;
  font-family: sans-serif;
}
#form h2 {
  color: #27748A;
  font-size: 35px;
  margin: 0;
}
#form p {
  font-size: 20px;
  color: #222222;
}
#form div {
  margin-top: 10px;
}
#form input,
textarea,
button {
  width: 50%;
  padding: 3px 5px;
}
#form label {
  font-weight: bold;
  font-size: 20px;
  color: #184552;
}
#form button {} #form button:hover {
  background-color: #CBEAF2;
}
.required {
  color: #dd6666;
}
#footer {
  background-image: url(../img/bg2.png);
  display: block;
  color: white;
}
#footer .columns {
  padding: 2%;
}

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Central Computers</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/ccframe.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/content.css">

</head>
<body>

<!-- Primary Page Layout -->
<div class="container">
   <!-- Header -->
   <div class="row">
   	  
      <div class="columns head">
      	<div class="four columns logo">
			<img src="img/logo.png" alt="Logo">
        </div>
        <div class="eight columns headerimage">
			<img src="img/london.png" alt="London">
        </div>
      </div>
    </div>
    <!-- Header -->
    <!-- Nav Bar -->
    <div class="row">

      <div class="twelve columns">
      	<ul class="topnav">
            <li><a href="#home">Home</a></li>
            <li><a href="#news">Buyers</a></li>
            <li><a href="#contact">Sellers</a></li>
            <li><a href="#about">Student Property</a></li>
            <li><a href="#about">Hotels</a></li>
            <li><a href="#about">News</a></li>
            <li><a href="#about">Contact</a></li>
            <li class="icon">
            	<a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
            </li>
        </ul>
      </div>
     </div> 
     <!-- Nav Bar -->
     <!-- Content -->
     <div class="row subcontent ">
     	<div class="four columns cBoxCenter">
        	<h3>BUYERS</h3>
            <p>
            	If you are a Buyer, looking for Off-Market Properties in prime central locations, then please get in contact with …
            </p>
            <button>Learn More</button>
        </div>
        <div class="four columns cBoxCenter ">
        	<h3>SELLERS</h3>
            <p>
            	If you have properties you wish to sell privately through our off-market collection, we can promote them for you …
            </p>
            <button>Learn More</button>
        </div>
        <div class="four columns cBoxEnd fillimage">
        	
        </div>
     </div>
     <div class="row content">
     	<div class="eight columns cBoxMain cBox">
        	<h2>Off-Market Properties UK</h2>
            <p>If you are looking to buy or sell off-market properties, then you certainly have come to the right place.  Off-Market Properties UK has over 30 years of experience in the global property business and we have many clients with an appetite for off-market properties to whom we already offer an expanding portfolio of outstanding development opportunities. Many of the off-market properties we listed this year sold within one month.</p>
            <p>Our service is completely bespoke and our task is to connect buyers to sellers with maximum discretion, confidentiality and with minimum fuss. Even though Off-Market Properties UK’s core market is central London, including: Belgravia, Knightsbridge, Kensington, Chelsea, Notting Hill, Covent Garden, Earls Court, we also have properties and development opportunities in other parts of the UK. Basically, wherever the market is most dynamic. If you own a property in an area where we do not yet cover, still try us.</p>
            <p>Why go off market? We understand that many property owners prefer to sell their properties privately and not publicly. Confidentiality is usually the reason, perhaps for family reasons or because the owner has a high profile. An advantage to owners is that interest in off market properties tend often to come from serious investors able to exchange quickly.</p>
        </div>
        <div class="four columns cBoxMain">
        	<h3>Contact Us</h3>
 			<form id="form" action="/process.php" method="post">
                <p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx
                <!--fields-->
            </form>
            <div>
                <label for='name'>Name<span class='required'>(required)</span></label>
                <input type='text' name='name' placeholder='your name here' required />
            </div>
            
            <div>
                <label for='tel'>Tel</label>
                <input type='tel' name='tel' placeholder='your telephone here' />
            </div>
            
            <div>
                <label for='email'>Email <span class='required'>(required)</span></label>
                <input type='email' name='email' placeholder='you@yourdomain.com' required />
            </div>
  
            <div>
                <label for='message'>Message <span class='required'>(required)</span></label>
                <textarea name='message' required></textarea>
            </div>
            
            <div>
                <button type='submit'>Send Message</button>
            </div>
        </div>
     </div>
	 <!-- Content -->
     
</div>
<!-- Container -->
<!-- Footer -->
    <div class="full full-width-container" id="footer">
     	<div class="container">
        	<div class="row">
            	<div class="four columns">
                <h4>Contact Us</h4>
                <p>Please get in contact with us to learn more about our Off-Market Properties:</p>
                <p>Tel:   +44 208 920 9414<br>
                Mob: +44 7463 424 888<br>
                Email: <a href="mailto:om@offmarketpropertiesuk.com">om@offmarketpropertiesuk.com</a></p>
                <p><img src="img/logo.png" width="300" height="85"></p>
                </div>
                <div class="four columns">
                <h4>Off Market Properties UK</h4>
			<p>If you are looking to buy or sell an off-market properties, then you certainly have come to the right place. </p>
<p>Our service is completely bespoke and our task is to connect buyers to sellers with maximum discretion, confidentiality and with minimum fuss. Even though Off Market Properties UK’s core market is central London, including: Belgravia, Knightsbridge, Kensington, Chelsea, Notting Hill, Covent Garden, Earls Court, we also have properties in other parts of the UK.</p>

                </div>
                <div class="four columns" style="overflow:hidden;">
        	<h3>Contact Us</h3>
 			<form id="form" action="/process.php" method="post">
                <p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx
                <!--fields-->
            </form>
            <div>
                <label for='name'>Name<span class='required'>(required)</span></label>
                <input type='text' name='name' placeholder='your name here' required />
            </div>
            
            <div>
                <label for='tel'>Tel</label>
                <input type='tel' name='tel' placeholder='your telephone here' />
            </div>
            
            <div>
                <label for='email'>Email <span class='required'>(required)</span></label>
                <input type='email' name='email' placeholder='you@yourdomain.com' required />
            </div>
              
            <div>
                <button type='submit'>Send Message</button>
            </div>
        </div>
            </div>
        </div>
   
    </div>
     <!-- Footer -->
<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
<script src="js/menu.js"></script>
</html>

Answer 1

你应该从这里删除容器宽度

   @media (min-width: 400px) {.container {
   // width: 85%;   //commented width
   padding: 0;
  }
}