Потерянная ширина контейнера по всему сайту

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

В настоящее время весь контент переходит от края к краю в окне браузера, но его можно центрировать в контейнере размером 980 пикселей.Это привело к тому, что весь контент не был центрирован в содержимом на всех страницах.Кроме того, у моих изображений на сайте была максимальная ширина, но теперь они продолжают расти по мере того, как я увеличиваю размер браузера.

Answer 1

РЕДАКТИРОВАТЬ: Фактический ответ: вам не хватает /* в качестве первой строки вашего CSS, чтобы начать комментарий блока.Комментарий из-за прерванного блока нарушает приведенные ниже правила.

Мне кажется, что CSS в ваших медиазапросах переопределяет стили по умолчанию, поэтому на любом устройстве, размер которого превышает 400 пикселей, он не будет применять * 1005.* Правило, которое вы ищете.Это код проблемы:

/* 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: