Having trouble centering the results of freeCodeCamp's Twitch.TV project? Even though you've tried using margin: auto and class='text-center', the section containing the results remains left-aligned. How can you ensure that the results are centered within the section?
HTML:
<html>
<head>
<title>Twitch.tv Guide</title>
</head>
<body>
<div class='container-fluid'>
<div class='content'>
<div class='row'>
<div class='col-12 text-center'>
<h1 class='text-center header'>Twitch.tv Guide</h1>
</div>
</div>
<div class='row menu'>
<div class='col-4 text-center'>
<button class='btn all-btn'>All</button>
<button class='btn online-btn'>Online</button>
<button class='btn offline-btn'>Offline</button>
</div>
</div>
<div class='row results text-center'>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body, .container-fluid {
background: black;
padding: 0;
margin: 0;
width: 100%;
}
body {
padding: 5em;
}
.container-fluid div {
}
.header {
width: 8.2em;
padding: .25em;
margin: 0 auto 1em auto;
background: #643FA5;
color: white;
box-shadow: 0 0 5px 0 white;
}
img {
width: 5em;
height: 5em;
border-radius: 50%;
margin: auto;
box-shadow: 0 0 5px 0 white;
}
.menu {
margin: auto;
padding: 0;
}
button {
margin: .125em auto;
width: 5em;
background: #643FA5;
color: white;
box-shadow: 0 0 5px 0 white;
}
.online, .offline {
margin: 1em auto;
width: 18em;
height: 15em;
padding: .5em;
box-shadow: 0 0 5px 0 white;
}
a, a:hover {
text-decoration: none;
}
...
JS:
var channels = [
"ESL_SC2",
"OgamingSC2",
"cretetion",
"freecodecamp",
...
];
...