我的HTML / CSS出现问题，页面左侧有一些填充，这意味着内容没有完全居中。当减小窗口宽度时，这个填充会导致浏览器使用可怕的水平滚动条！有人能告诉我哪里出了问题吗？ jsfiddle是：
https://jsfiddle.net/1faj9xt5/
HTML：
<head>
<meta charset="UTF-8">
<title>Simple Portfolio Theme</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.fontawesome.com/a61938b57c.js"></script>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner">
<div class="container">
<section id="header">
<header>
<span class="avatar"><img src="images/avatar.jpg" alt="" /></span>
<h1>Me</h1>
<p>About Me</p>
</header>
<ul class="icons">
<li><a href="#" title="Twitter" class="fa-twitter">Twitter</a></li>
<li><a href="#" title="Instagram" class="fa-instagram">Instagram</a></li>
<li><a href="#" title="Facebook" class="fa-facebook">Facebook</a></li>
</ul>
</section>
<!--start portfolio-->
<section id="portfolio">
<div class="row">
<!---start row-->
<div class="col-xs-12 col-sm-6 col-md-4">
<!--start element 1-->
<div class="thumbnail shadow up-hover">
<img src="http://emant.altervista.org/ext/tic.jpg" />
<div class="cust-caption">
<a href="https://codepen.io/Em-Ant/full/QbRyqq"><h3 class="stm-font">Test Title</h3></a>
<p>Test description. </p>
</div>
</div>
</div>
<!--end element 1-->
<div class="col-xs-12 col-sm-6 col-md-4">
<!--start element 2-->
<div class="thumbnail shadow up-hover">
<img src="http://emant.altervista.org/ext/tic.jpg" />
<div class="cust-caption">
<a href="https://codepen.io/Em-Ant/full/vObzWm"><h3 class="stm-font">Test Titlek</h3></a>
<p>Test description. </p>
</div>
</div>
</div>
<!--end element 2-->
<div class="col-xs-12 col-sm-6 col-md-4">
<!--start element 3-->
<div class="thumbnail shadow up-hover">
<img src="http://emant.altervista.org/ext/tic.jpg" />
<div class="cust-caption">
<a href="https://codepen.io/Em-Ant/full/OVabRP"><h3 class="stm-font">Test Title</h3></a>
<p>Test description. </p>
</div>
</div>
</div>
<!--end element 3-->
<div class="col-xs-12 col-sm-6 col-md-4">
<!--start element 4-->
<div class="thumbnail shadow up-hover">
<img src="http://emant.altervista.org/ext/tic.jpg" />
<div class="cust-caption">
<a href="https://codepen.io/Em-Ant/full/jPQqwB"><h3 class="stm-font">Test Title</h3></a>
<p>Test description. </p>
</div>
</div>
</div>
<!--end element 4-->
<div class="col-xs-12 col-sm-6 col-md-4">
<!--start element 5-->
<div class="thumbnail shadow up-hover">
<img src="http://emant.altervista.org/ext/tic.jpg" />
<div class="cust-caption">
<a href="https://codepen.io/Em-Ant/full/WvPNPM"><h3 class="stm-font">Test Title</h3></a>
<p>Test description. </p>
</div>
</div>
</div>
<!--end element 5-->
<div class="col-xs-12 col-sm-6 col-md-4">
<!--start element 6-->
<div class="thumbnail shadow up-hover">
<img src="http://emant.altervista.org/ext/tic.jpg" />
<div class="cust-caption">
<a href="https://codepen.io/Em-Ant/full/KpEWdR"><h3 class="stm-font">Test Title</h3></a>
<p>Test description. </p>
</div>
</div>
</div>
</div>
<!---end row-->
</section>
<!--end portfolio-->
</div>
<!--end container-->
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
CSS：
@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);
.thumbnail {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.shadow {
box-shadow: 7px 7px 7px #666;
position: relative;
transition: all 0.2s;
top: 0;
}
.cust-caption {
display: none;
position: absolute;
background-color: rgba(30, 30, 30, 0.8);
padding: 10px;
color: #ddd;
margin: 5px;
bottom: 0;
left: 0;
right: 0;
height: 90%;
margin: 5px;
overflow-y: auto;
}
.stm-font {
font-family: 'Share Tech Mono', monospace;
}
.color-hover:hover {
color: #337AB7;
}
.up-hover:hover {
top: -5px;
box-shadow: 15px 15px 15px #777;
}
.cust-caption a {
color: white;
text-shadow: 1px 1px 2px black;
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
}
/* header */
#header {
position: relative;
max-width: 100%;
min-width: 27em;
padding: 4.5em 3em 3em 3em;
background: #ffffff;
border-radius: 4px;
cursor: default;
opacity: 0.95;
text-align: center;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
-moz-transition: opacity 1s ease, -moz-transform 1s ease;
-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
-ms-transition: opacity 1s ease, -ms-transform 1s ease;
transition: opacity 1s ease, transform 1s ease;
}
#header .avatar {
position: relative;
display: block;
margin-bottom: 1.5em;
}
#header .avatar img {
display: block;
margin: 0 auto;
border-radius: 100%;
box-shadow: 0 0 0 1.5em #ffffff;
}
#header .avatar:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: -3em;
width: calc(100% + 6em);
height: 1px;
z-index: -1;
background: #c8cccf;
}
@media screen and (max-width: 480px) {
#header {
min-width: 0;
width: 100%;
padding: 4em 2em 2.5em 2em;
}
#header .avatar:before {
left: -2em;
width: calc(100% + 4em);
}
}
#header .avatar {
position: relative;
display: block;
margin-bottom: 1.5em;
}
#header .avatar img {
display: block;
margin: 0 auto;
border-radius: 100%;
box-shadow: 0 0 0 1.5em #ffffff;
}
#header .avatar:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: -3em;
width: calc(100% + 6em);
height: 1px;
z-index: -1;
background: #c8cccf;
}
@media screen and (max-width: 480px) {
#header {
min-width: 0;
width: 100%;
padding: 4em 2em 2.5em 2em;
}
#header .avatar:before {
left: -2em;
width: calc(100% + 4em);
}
}
/* List */
ol {
list-style: decimal;
margin: 0 0 1.5em 0;
padding-left: 1.25em;
}
ol li {
padding-left: 0.25em;
}
ul {
list-style: disc;
margin: 0 0 1.5em 0;
padding-left: 1em;
}
ul li {
padding-left: 0.5em;
}
ul.alt {
list-style: none;
padding-left: 0;
}
ul.alt li {
border-top: solid 1px #c8cccf;
padding: 0.5em 0;
}
ul.alt li:first-child {
border-top: 0;
padding-top: 0;
}
ul.icons {
cursor: default;
list-style: none;
padding-left: 0;
margin-top: -0.675em;
}
ul.icons li {
display: inline-block;
padding: 0.675em 0.5em;
}
ul.icons li a {
text-decoration: none;
position: relative;
display: block;
width: 3.75em;
height: 3.75em;
border-radius: 100%;
border: solid 1px #c8cccf;
line-height: 3.75em;
overflow: hidden;
text-align: center;
text-indent: 3.75em;
white-space: nowrap;
}
ul.icons li a:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
ul.icons li a:before {
color: #ffffff;
text-shadow: 1.25px 0px 0px #c8cccf, -1.25px 0px 0px #c8cccf, 0px 1.25px 0px #c8cccf, 0px -1.25px 0px #c8cccf;
}
ul.icons li a:hover:before {
text-shadow: 1.25px 0px 0px #ff7496, -1.25px 0px 0px #ff7496, 0px 1.25px 0px #ff7496, 0px -1.25px 0px #ff7496;
}
ul.icons li a:before {
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
font-size: 1.85rem;
line-height: inherit;
text-align: center;
text-indent: 0;
}
ul.icons li a:hover {
border-color: #ff7496;
}
@media screen and (max-width: 480px) {
ul.icons li a:before {
font-size: 1.5rem;
}