What the **** did I do wrong?

html-css

#1

Hey folks,

I am a beginner in html so…
I tried to make a website but for some reason all the content is aligning to the left instead of aligning to the center. What did I do wrong?

**HTML**

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta id="author" name="Thomas Reuvers">
  <title>HSP | Home</title>
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
</head>

<body>

<header>
  <a href="index.html">
   <img src="img/hsplogo.png" alt="HSP LOGO" class="logo">
  </a>
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact</a></li>
      <li><a href="">Donate</a></li>
      <li><a href="">Join</a></li>
      <li><a href="">Staff</a></li>
    </ul>
  </nav>
</header>

<section class="home-hero">
  <div class="container">
  <h1 class="title">Hardened Steel Pants
     <span>International gaming community</span>
  </h1>
  <a href="" class="button button-accent">Join us</a>
  </div>
</section>


<div class="container">
<section class="home-about">

<div class="home-about-textbox">
 <h1> Who Are We?</h1>
 <p>We're glad to see that you've made it to our homepage!
 So who are we? We are HSP or Hardened Steel Pants.
 The abbreviation HSP comes from, Ah never mind you probably understand that already.
 So what are we? We are a international Gaming Group, Clan, Community, Family...?
 We are Whatever you want us to be.
 We can even be your light in the dark. It all depends on you :).
 What do we do? Most of the time we are playing games.
 Or hanging out with other people.
 our motto is: 'Never fight without pants'. Oops no this is the wrong one I meant: 'It's all about fun'.
 I hope we have made it clear to you what we stand for and who or what we are!</p>
</div>

</section>
</div>



<div class="container">
  <section class="donate">
    <h1>Donate to us!</h1>
    <script src="https://donorbox.org/widget.js" type="text/javascript"></script>
    <iframe src="https://donorbox.org/embed/donate-335?show_content=true" height="685px" width="100%" style="max-width:100%; min-width:100%; max-height:none!important" seamless="seamless" name="donorbox" frameborder="0" scrolling="no"></iframe>
  </section>
</div>



<section class="cta">
  <div class="container">
  <h1 class="title title-cta">Have questions?
     <span>Send them to us!</span>
  </h1>
  <a href="" class="button button-accent">Contact Us</a>
  </div>
</section>


<footer>
<div class="container">
 <div class="col-3">
  <p>Hardened Steel Pants&copy; This website was made by Battlepants. Style Brown Media & Jorg Ernst</p>
 </div>
 <div class="col-1">
  <ul class="unstyled-list">
   <li><strong>Pages</strong></li>
   <li><a href="">Home</a></li>
   <li><a href="">About</a></li>
   <li><a href="">Contact</a></li>
   <li><a href="">Donate</a></li>
   <li><a href="">Join</a></li>
   <li><a href="">Staff</a></li>
  <ul>
</div>
</div>
</footer>

</body>
</html>

**CSS**

@import
url('https://fonts.googleapis.com/css?family=Righteous')
;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Righteous', cursive;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
}


.container {
  width: 95%;
  max-width: 70em;
  height: 0 auto;
}

.clearfix::after,
section::after,
footer::after {
  content: '';
  display: block;
  clear: both;
}

/* Column system
==================== */

[class^=col-] {
  width: 100%;
  margin-top: 1em;
}

[class^=col-]:first-child {
  margin-top: : 0;
}

.col-1 {
  width: 33.333334%;
  float: left;
}


@media (min-width: 40rem) {

  [class^=col-] {
    float: left;
    padding: 0 .5em;
    margin-top: 0;
  }

  [class^=col-]:first-child {
    padding-left: 0;
  }

  [class^=col-]:last-child {
    padding-right: 0;
  }

.col-3 {
  width: 50%;
 }

.col-1 {
 width: 16.6666%;
 }
}



/* typography
============== */

h1 {
  font-weight: 300;
  font-size: 1.7rem;
  margin-top: 0;
}

p {
  margin-top: 0;
}

p:last-of-type {
  margin-bottom: 0;
  line-height: 1.5;
}


.title {
font-size: 2.5rem;
margin-bottom: 1.5em;
padding-top: 1.5em;
font-weight: 900;
margin-top: 1em;
}

.title span {
  font-weight: 300;
  display: block;
  font-size: .6em;
}

.title-cta {
  margin: 0 0 .5em;
}

.unstyled-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.unstyled-list li a {
  text-decoration: none;
  color: #fff;
}


@media (min-width:60rem ) {

   p {
    font-size: 1.2rem;
    line-height: 1.6;
  }

  .title {
    font-size: 3.7rem;
  }

}


/* buttons */

.button {
  display: inline-block;
  font-size: 1.15rem;
  text-decoration: none;
  text-transform: uppercase;
  border-width: 2px;
  border-style: solid;
  padding: .5em 1.75em;
}

.button-accent {
  color: skyblue;
  border-color: skyblue;
}

.button-accent:hover,
.button-accent:focus {
  background: skyblue;
  color: white;
}


@media (min-width: 60rem) {
  .button {
    font-size: 1.5rem;
  }
}


/* Header
============== */

header {
  position: absolute;
  left: 0;
  right: 0;
  margin: 1em;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin: 1em;
}

nav a {
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  padding: .5em;
  color: #fff;
}

nav a:hover,
nav a:focus {
  color: skyblue;
}


@media (min-width:60rem ) {
  .logo {
    float: left;

  }

  nav {
    float: right;
  }
}



/* Home-hero
============== */

.home-hero {
  background-image:
  url(../img/Header_HSP.png);
  background-size: cover;
  background-position: center;
  padding: 10em 0;
  color: #FFF;
}

@media (min-width: 60rem) {
  .home-hero {
    height: 100vh;
    padding-top: 35vh;
  }
}

/* Hero-home
============== */

.home-about-textbox {
  background-color: #222;
  padding: 4em;
  width: 100vw;
  outline: 2px solid skyblue;
  outline-offset: -2.5em;
  color: white;
  position: relative;
}

.home-about-textbox h1 {
  color: skyblue;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: .75em;
  background: #222;
  padding: 0 .145em;
}


@media (min-width: 25rem) {
  h1{
    font-size: 2rem
  }

  .home-about-textbox h1 {
    top: .6em;
    padding: 0 .325em;
  }
}


@media (min-width: 60rem) {
  h1{
    font-size: 2.5rem
  }

.home-about {
  /* background-image:
    url(../img/Header_HSP.png); */
    background-color: #ccc;
    background-repeat: no-repeat;
    padding-bottom: 10em;
}

  .home-about-textbox {
    width: 50%;
    padding: 7em;
    outline-offset: -3.75em;
    margin-left: -2.5%;
    top: -5em;
    text-align: left;
    box-shadow: 0 0 4em 0 rgba(0,0,0,.25);
  }

  .home-about-textbox h1 {
    top: .75em;
    left: 6rem;
    transform: translateX(0);
  }
}


/* Donate form
============== */

.donate {
  background-color: #fff;
}


/* CTA
============== */

.cta {
  background-color: #595858;
  padding: 5em 0;
  color: #fff;
}


/* Footer
============== */

footer {
  background: #222;
  color: #fff;
  text-align: left;
  padding: 5em 0;
}


#2

Try to add margin: 0 auto to your container class.


#3

Thanks that did fix it!