Comme vous utilisez un flexbox Vous devez donc centrer le grey zone en utilisant flex: 1; .
Pour aligner les green partie gauche utiliser justify-content: flex-start et ajouter également margin: 0 au corps pour le terminer !
body {
color: #FFFFFF;
text-align: center;
margin: 0;
}
.site-wrapper {
position: fixed;
display: table;
width: 100%;
height: 100%;
min-height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.site-wrapper-inner {
flex: 1;
}
Faites-moi part de vos commentaires à ce sujet. Je vous remercie.
.side-nav {
height: 100%;
background-color: #23CF5F;
color: #FFFFFF;
overflow-y: auto;
}
a,
a:focus,
a:hover {
color: #FFFFFF;
}
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333333;
text-shadow: none;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}
html,
body {
height: 100%;
background-color: #333333;
}
body {
color: #FFFFFF;
text-align: center;
margin: 0;
}
.site-wrapper {
position: fixed;
display: table;
width: 100%;
height: 100%;
min-height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.site-wrapper-inner {
flex: 1;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
.inner {
padding: 30px;
}
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
color: rgba(255, 255, 255, .75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255, 255, 255, .25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
color: #999;
/* IE8 proofing */
color: rgba(255, 255, 255, .5);
}
/*
* Affix and center
*/
@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%;
}
}
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
.wrapper {
text-align: center;
max-width: 50%;
}
.glyphicon {
font-size: 30px;
}
.album-art {
margin-right: -30px;
}
<body ng-app="music">
<div class="site-wrapper">
<div class="col-sm-3 side-nav" ng-controller="ctrl">
<h3><a href="#" data-toggle="modal" data-target="#myModal">Music</a></h3>
<hr>
<div ng-repeat="song in data">
<p>
{{ song in data }}
</p>
</div>
</div>
<div class="col-sm-9 site-wrapper-inner">
<div class="cover-container">
<div class="inner cover">
<div class="container">
<div class="row">
<div class="col-sm-12">
<img src="../assets/sample-art.png" height="150" width="150">
<br>
<img src="../assets/sound_bar_dark.gif">
<h3>Track Name</h3>
<h5>Artist : Album</h5>
</div>
</div>
<div class="row">
<div class="wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
