Lost container width throughout site - css

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 Apple. </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>
I'm not sure how I did this, but after cleaning my cache I realized that my site that I'm working on has lost the containers somehow. Reverting to older code hasn't helped fix the issue so I'm not sure where to start fixing this.
The site looks ok in safari, but is broken in Firefox or chrome. Any support for a coding novice would be really appreciated.
http://perceptioncube.com/M_Port/index.html
Currently all of the content is going edge to edge on the browser window, and but is could be centered within a 980px container. This has resulted in all content to be uncentered in a containing on all pages. Additionally I'm images throughout the site had a max width to them, but now they continue to grow as I increase the size of the browser.

Answer 1

EDIT: Actual answer: You are missing a /* as the first line of your CSS to start the block comment. The broken block comment is breaking the rules below it.
Looks to me like the CSS in your media queries are overriding the default styles, so on any device larger than 400px it will not apply the max-width: 960px; rule you are looking for. This is the problem code:
/* 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%;
}
}
You can see this by inspecting the element in Chrome dev tools: