整个站点丢失的容器宽度

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>

我不确定我是怎么做到的，但是在清理缓存后，我意识到我正在处理的站点已经以某种方式丢失了容器。还原到较旧的代码并不能帮助解决该问题，因此我不确定从哪里开始解决此问题。

该网站在野生动物园中看起来还可以，但在Firefox或chrome中已损坏。非常感谢编码新手的任何支持。

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

当前，所有内容在浏览器窗口上都在不断变化，但是可以位于980px容器的中心。这导致所有内容不在所有页面上的包含中。另外，我在整个站点上使用的图像具有最大宽度，但是现在随着我增加浏览器的尺寸，它们继续增长。

Answer 1

编辑：实际答案：您缺少/*作为CSS的第一行来启动块注释。损坏的块注释违反了下面的规则。

在我看来，媒体查询中的CSS会覆盖默认样式，因此在大于400px的任何设备上，它都不会应用您要查找的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开发工具中的元素来查看此内容：