0

I want the main section of the page to be horizontally centered and to have varying top and bottom margins. I can center the section with margin-left: auto; margin-right: auto; but I can't set the top and bottom margin. The main section is using .main-content class. Please have a look.

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background-color: rgb(14, 18, 43);
}

header {
  margin-top: 2em;
  margin-bottom: 2em;
}

h1 {
  text-align: center;
  color: rgb(228, 228, 228);
  font-family: 'Courier New', Courier, monospace;
}

.main-content {
  display: block;
  width: 600px;
  background-color: antiquewhite;
  margin-left: auto;
  margin-right: auto;
  margin-top: 500;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Krazuescode.com</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <header>
    <h1>UINASHIoAMS.COM</h1>
  </header>
  <section class="main-content">
    <a href="">Related searches</a>
    <div>Software to Manage Remote Employees</div>
    <div>Mobile Device Management for Ios</div>
    <div>Mobile Device Management for Ipads</div>
  </section>
  <footer>
    <span>Copyright © 2022</span><span>|</span>
    <a href="">Privacy Policy</a>
  </footer>
</body>

</html>
Sigurd Mazanti
  • 2,098
  • 1
  • 8
  • 24
Jamal Yarfoor
  • 47
  • 3
  • Does this answer your question? [Why does this CSS margin-top style not work?](https://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work) – Blue Robin Mar 19 '23 at 22:20

1 Answers1

2

You forget add a px to 500

.main-content {
  display: block;
  width:600px;
  background-color: antiquewhite;
  margin: 500px auto;
}

More info you can find here: https://developer.mozilla.org/en-US/docs/Web/CSS/margin

Arthur Arakelyan
  • 164
  • 1
  • 11