整个站点丢失的容器宽度

Question

* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  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: 550px) {
  .container {
    width: 90%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .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.5rem;
    line-height: 1.6;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    color: rgba(0,0,0,.7);
}

.header{
  text-align: left;
}

.header img{
  margin-top: 5%;
}

.header img a{
  text-decoration: none;
}

.header p{
  font-size: 9rem;
    font-weight: 700;
    line-height: 8.5rem;
    font-family: 'roboto', monospace;
}

.home-feature-container{
  padding: 2% 4% 6% 0;
}

.home-feature-container-onecolumn{
  padding: 4% 0% 4% 0;
}

.home-feature-container img{
  max-width: 100%;
}

.home-feature-container-onecolumn img{
  max-width: 100%;
}

.header a{
  color: #fed230;
  font-weight: 700;
  text-decoration: none;
}

.story-title{
  text-transform:uppercase;
  font-size: 4rem;
  font-weight:400;
  line-height: 1.2;
  letter-spacing: 0rem;
}

.story-footer{
  text-align: center;
  border-top: 1px solid #e6e6e6;
  margin-top: 10%;
}

.story-footer p{
  font-size: 1.4rem;
  color:#969696;
  padding: 5% 0 0 0;
  text-transform: uppercase;
}

#menu{
  padding: 2% 0 2% 0;
}

#article{
  margin: 8% 0 8% 0;
}

#home-entries{
  margin: 6% 0 6% 0;
}

.navbar-list{
  list-style: none;
  margin-bottom: 0;
}

.navbar-item{
  position: relative;
  float: left;
  margin-bottom:5%;
  height: 40px;
}

.social{
  text-decoration: underline;
}

.desc{
font-style: italic;
font-size: 1.1rem;
color:#B4B4B4;
}

.desc-story{
  font-size: 1.2rem;
  color: #B4B4B4;
  padding: 0 0 5% 0;
  font-family: 'roboto mono', monospace;
}

.desc-story a{
color:#B4B4B4;
text-decoration: underline;
}

.desc a{
color:#B4B4B4;
text-decoration: underline;
}

.writings-subtext{
font-size: 1.5rem;
margin-top: 0.4rem;
color:#969696;
margin-bottom: 2%;
font-family: 'roboto mono', monospace;
}



/* POTOGRAPHY related */
.cover-image{
  margin: 0 auto;
  padding: none;
}

.cover-image img{
  width: 100%;
  top:0; left:0;
}

.photo-set-title {
  text-decoration: none;
      color: #5A5A5A;
      font-size: 1.7rem;
      font-weight: 400;
      font-family: 'roboto mono', monospace;
}

#photography-cover{
  margin: 1% 2% 0% 0%;
  text-align: center;
}

#photography-cover img{
  max-width: 100%;
}

.photo-date{
  font-size: 1.1rem;
  color: #969696;
}

.photo-container {
  margin-bottom: 2%;
  margin-top: 8%;
}

.photo-container img{
  max-width: 100%;
}

.photo-container:hover img{
}

.photo-story-container p{
  text-align: center;
  padding: 3% 0 3% 0;
}

.photo-breadcrumbs{
display: inline;
margin-bottom: 10%
}

.photo-breadcrumbs-one a{
  color: #969696;
      font-size: 1.3rem;
      font-weight: 300;
      text-decoration: none;
      font-family: 'roboto mono', monospace;
}

.photo-breadcrumbs-two{
  font-size: 2.5rem;
  font-weight: 300;
  text-decoration: none;
  font-family: 'roboto mono', monospace;
}

/* VIDEO related */
video{
  width:100%;
}

.video-container{
  width: 100%;
  margin: auto;
  padding: 0 0 10% 0;
}

.video-container-400{
  max-width: 400px;
  margin: auto;
}

.video-container-360{
  max-width: 360px;
  margin: auto;
}

.video-container-682{
  max-width: 682px;
  margin: auto;
}

.video-container-644{
  max-width: 682px;
  margin: auto;
}


/* PORTOFLIO related */

.dates {
  color: #969696;
      font-size: 1.3rem;
      font-weight: 300;
      text-decoration: none;
      font-family: 'roboto mono', monospace;
}

.photo-caption {
  font-family: 'DINProMed', 'Roboto', sans-serif;
  color: #969696;
  font-size: 1.4rem;
  font-weight: 300;
  text-decoration: none;
  
}

.portfolio-project-container{
  text-align: left;
  padding: 4% 0 4% 0;
}

.portfolio-project-container p{
  text-align: left;
  padding: 3% 0 3% 0;
}

.portfolio-container{
  margin-bottom: 20%;

}
.portfolio-big-container{
  margin-bottom: 10%;

}

.portfolio-big-container img{
  max-width: 100%;
  display: block;
  margin-bottom: 20px;
}

.portfolio-container img{
  max-width: 100%;
  display: block;
  margin-bottom: 20px;
}

.portfolio-set-title {
text-decoration: none;
color: #5A5A5A;
font-size: 1.7rem;
font-weight:300;
font-family: 'roboto mono', monospace;

}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
   }
h1 { font-weight:300; line-height: 1.2; color: #000; font-family: 'Roboto Mono', monospace; padding-bottom: 30px; margin-top:4%; text-transform: uppercase;}
h2 { line-height: 1.25; margin-bottom: 2rem; margin-top: 2rem; font-weight: 300; color:#333335; letter-spacing: 0.04rem; font-family: 'Roboto Mono', monospace; }
h3 { font-size: 2.5rem; line-height: 1.25; margin-bottom: 0rem; margin-top: 2%; font-weight: 400;font-family: 'Roboto Mono', monospace; }
h4 { font-weight:400; line-height: 1.2; letter-spacing: 0rem; }
h5 { font-size: 1.4rem; line-height: 1.5; padding: 2% 0 0% 0; color: #969696; margin-bottom: .2rem; font-weight:500; letter-spacing: 0.1rem;}
h6 { font-family: 'Open Sans', serif; text-transform:uppercase; font-size: 1.5rem; font-weight:600; line-height: 1.2; letter-spacing: 0rem;}


/* phone  */
@media (max-width: 550px) {

.header p{
  font-size: 6rem;
    font-weight: 700;
    line-height: 6rem;
    font-family: 'roboto', monospace;
  }
}

p {
  margin-top: 0;
  padding-right:0%;
  line-height: 3rem}

p a{
  /* text-decoration: underline; */ 
  color: #2963ff;
}

/* Links */
a {
  text-decoration: none;
  color: #969696;
  cursor: pointer;
}

/* 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 {
  padding-left: 1rem;
  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; }


/* 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) {}


/* MORE CSS */ 
.value-prop {
  margin-top: 1rem; }
.value-props {
  margin-top: 4rem;
  margin-bottom: 4rem; }
.docs-section {
  padding: 4rem 0;
  margin-bottom: 0;}
.value-img {
  display: block;
  text-align: center;
  margin: 2.5rem auto 0; }
.example-grid .column,
.example-grid .columns {
  background: #EEE;
  text-align: center;
  border-radius: 4px;
  font-size: 1rem;
  text-transform: uppercase;
  height: 30px;
  line-height: 30px;
  margin-bottom: .75rem;
  font-weight: 600;
  letter-spacing: .1rem; }
.example {
  position: relative; 
  margin-top: 4rem; } 
.example-screenshot-wrapper {
  border-radius: 0px;
  display: block;
  position: relative;
  overflow: hidden;
  height: 250px; 
  }
.example-screenshot-wrapper:hover {
  box-shadow: 0, 0;
}
.example-screenshot {
  width: 100%;
  height: auto; }
.navbar {
  display: none; }

/* Larger than phone */
@media (min-width: 550px) {
  .value-props {
    margin-top: 9rem;
    margin-bottom: 7rem; }
  .value-img {
    margin-bottom: 1rem; }
  .example-grid .column,
  .example-grid .columns {
    margin-bottom: 1.5rem; }
  .docs-section {
    padding: 0rem 0; }
  .example-send-yourself-copy {
    float: right;
    margin-top: 12px; }
  .example-screenshot-wrapper {
    position: absolute;
    width: 48%;
    height: 100%;
    left: 0;
    max-height: none; }
}


/* ----------- BUTTONS ----------- */

/* NAVIGATION BAR */ 
.navbar-link {
  font-family: 'DINProBold', 'Roboto', sans-serif;
  color: #969696;
  margin-right: 35px;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  border: none;
  white-space: nowrap;
  background-color: #FFF;
  padding-bottom: 5px;
  border-radius: 0px;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
  border-bottom: 5px solid #FFF;
  transition: color .20s ease-in;
   -moz-transition: color .20s ease-in;
   -webkit-transition: color .20s ease-in;
  transition: border-bottom .20s ease-in;
   -moz-transition: border-bottom .20s ease-in;
   -webkit-transition: border-bottom .20s ease-in;
}

.navbar-link:hover {
  color:#333333;
  border-bottom: 5px solid #333333;
}

#active {
  color: #333333;
  border-bottom: 5px solid #333333;
}

/* SEE MORE  */ 
.button {
  font-family: 'DINProBold', 'Roboto', sans-serif;
  color: #969696;
  margin-right: 35px;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  white-space: nowrap;
  background-color: #FFF;
  padding-bottom: 5px;
  border-radius: 0px;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
  border-bottom: 5px solid #FFF;
  transition: color .20s ease-in;
   -moz-transition: color .20s ease-in;
   -webkit-transition: color .20s ease-in;
  transition: border-bottom .20s ease-in;
   -moz-transition: border-bottom .20s ease-in;
   -webkit-transition: border-bottom .20s ease-in;
}

.button:hover {
  color:#333333;
  border-bottom: 5px solid #333333;
}

#homebtn {
  margin-right: 0px;
}

#main-button { 
    color: #fed230;
}

#main-button:hover { 
    border-bottom: 5px solid #fed230;
}

#fires-button { 
    color: #6AABC8;
}

 
 #massive-button { 
    color: #0099F7;
}

#massive-button:hover { 
    border-bottom: 5px solid #0099F7;
}

#processing-button { 
    color: #D22A88;
}

#processing-button:hover { 
    border-bottom: 5px solid #D22A88;
}

 
 
#volume-UI-button { 
    color: #FFB2AD;
}

#volume-UI-button:hover { 
    border-bottom: 5px solid #FFB2AD;
}

#accessibility-button { 
    color: #02b875;
}

#accessibility-button:hover { 
    border-bottom: 5px solid #02b875;
}



 
 
.contact-link {
  color: #969696;
  cursor: pointer;
}

.contact-link:hover {
  color: #333333;
  cursor: pointer;
}

.contact-link-dribble {
  color: #969696;
  cursor: pointer;
}

.contact-link-dribble:hover {
  color: #ea4c89;
  cursor: pointer;
}

.contact-link-linkedin {
  color: #969696;
  cursor: pointer;
}

.contact-link-linkedin:hover {
  color: #0077B5;
  cursor: pointer;
}

#clothed-button { 
    color: #DD5837;
}

#clothed-button:hover { 
    border-bottom: 5px solid #DD5837;
}

#sign-button { 
    color: #0084FF;
}

#sign-button:hover { 
    border-bottom: 5px solid #0084FF;
}

#cablecar-button { 
    color: #EF6967;
}

#cablecar-button:hover { 
    border-bottom: 5px solid #EF6967;
}


 /* ----------- LINKS ----------- */

#link {
  color: #2963ff;
  font-family: 'DINProBold', 'Roboto', sans-serif;
  border-bottom: 3px solid #FFF;
  transition: border-bottom .20s ease-in;
   -moz-transition: border-bottom .20s ease-in;
   -webkit-transition: border-bottom .20s ease-in;
}

#link:hover {
  border-bottom: 3px solid #2963ff;
}

.centered { 
  display: block;
    margin-left: auto;
    margin-right: auto;
 }

.center {
text-align: center !important;
}


#option-back:hover {
  color: #333333;
  cursor: pointer;
}

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

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title> ???? Megan Mitchell's Portfolio</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="theme-color" content="#000000">
  
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121696572-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-121696572-1');
</script>

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

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500" rel="stylesheet">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  
  <!-- Javascript
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <script type="text/javascript" src="javascript/code.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="http://perceptioncube.com/M_Port/images/favicon.png">

</head>
<body>


 <!-- On load fade in page -->
<script>
$(document).ready(function() {
    $("body").css("display", "none");
    $("body").fadeIn(150);
 
    $("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(100, redirectPage);      
    });
         
    function redirectPage() {
        window.location = linkLocation;
    }
});
</script>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div class="container">
  
<!-- logo -->
		<div class="onecolumn" style="margin-top: 4%; margin-bottom:2%;">
        <a href="index.html"> <img border="0" alt="Megan Mitchell Portfolio" src="images/megan_mitchell_dark.png" width="200" height="57">
        </div>
<!-- end logo-->

<section class="header">
  <div class="row" id="menu">
     <div class="onecolumn" style="margin-top: 2%; margin-bottom:10%;">
        <ul class="navbar-list"">
          <li class="navbar-item"><a class="transition, navbar-link" id="active" href="index.html">Work</a></li>
          <li class="navbar-item"><a class="transition, navbar-link" href="contact.html">Contact</a></li>
          <li class="navbar-item"><a class="transition, navbar-link" href="illustrations.html">Illustrations</a></li>
          <li class="navbar-item"><a class="transition, navbar-link" href=" https://thenounproject.com/megan.mitchell/" target="blank">Icons</a></li>
       </ul>
      </div>
    </div>

  
  <div class="row">
    <div class="onecolumn">
      <p id="DINBold">Interactive Art Director & designer, currently at <a href="www.apple.com" class="contact-link">Apple</a>. </p>
    </div>
  </div>
</section>

<div class="docs-section examples" id="home-entries">
    

     <a name="apple"></a> 
    <!-- Apple 1 -->
    <div class="home-feature-container">
      <div class="row example">
        <a class="example-screenshot-wrapper" id="google-img" href="apple_pass.html"> <img class="example-screenshot" src="images/landing/apple_landing.jpg"> </a>
          <div class="one-half offset-by-one-half column"> 

            <br>
            <h2 class="example-header"><span id="heading">Various Projects </span><span id="heading2">for Apple</span></h2>
            <p><span class="dates" id="subheading">Nov 2014 · Present</span></p>
            <p class="example-description">A variety of interactive projects for Apple since 2014 ranging from marketing websites to application design.</p>
            <a class="button" id="main-button" href="apple_pass.html">See more</a>
            <br>
            <br>

        </div>
      </div>
    </div>
 
 
 	<a name="ocho"></a> 
    <!-- ocho -->
    <div class="home-feature-container">
      <div class="row example">
        <a class="example-screenshot-wrapper" id="google-img" href="ocho.html"> <img class="example-screenshot" src="images/landing/ocho_landing.jpg"> </a>
          <div class="one-half offset-by-one-half column"> 
            <br>
            <br>
            <h2 class="example-header"><span id="heading">Product Design </span><span id="heading2">for Ocho</span></h2>
            <p><span class="dates" id="subheading">Produced for Ocho</span></p>
            <p class="example-description">Lead designer halfway through the project to assist with look and feel, design needs, on-boarding, UI and UX.</p>
            <a class="button" id="main-button" href="ocho.html">See more</a>
            <br>
            <br>
            <br>
        </div>
      </div>
    </div>


        <a name="chaos"></a> 
    <!-- State Farm Chaos -->
    <div class="home-feature-container">
      <div class="row example">
        <a class="example-screenshot-wrapper" id="google-img" href="statechaos.html"> <img class="example-screenshot" src="images/landing/chaos_landing.jpg"> </a>
          <div class="one-half offset-by-one-half column"> 
            <br>
            <h2 class="example-header"><span id="heading">App Design </span><span id="heading2">for Statefarm</span></h2>
            <p><span class="dates" id="subheading">Produced at DDB</span></p>
            <p class="example-description">Application concept and design for State of Chaos application that launches from an iAd.</p>
            <a class="button" id="main-button" href="chaos.html">See more</a>
            <br>
            <br>

        </div>
      </div>
    </div>








</div>



<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

我不确定我是如何做到的，但在清理缓存后，我意识到我正在处理的网站不知何故丢失了容器。恢复到旧代码并没有帮助解决这个问题，所以我不确定从哪里开始解决这个问题。

该网站在 safari 中看起来不错，但在 Firefox 或 chrome 中出现故障。任何对编码新手的支持将不胜感激。

http://perceptioncube.com/M_Port/index.html

目前所有的内容都在浏览器窗口上边到边，但可以在 980px 的容器中居中。这导致所有内容在所有页面上的包含中都不居中。此外，我整个网站的图像都有最大宽度，但现在随着我增加浏览器的大小，它们会继续增长。

Answer 1

编辑：实际答案：您缺少 /* 作为 CSS 的第一行来开始块注释。被破坏的块评论违反了它下面的规则。

在我看来，您的媒体查询中的 CSS 覆盖了默认样式，因此在任何大于 400 像素的设备上，它都不会应用您正在寻找的 max-width: 960px; 规则。这是问题代码：

/* For devices larger than 400px */

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


/* For devices larger than 550px */

@media (min-width: 550px) {
  .container {
    width: 90%;
  }
}

您可以通过检查 Chrome 开发工具中的元素来看到这一点：