I have searched SO for similar questions, but not found anything yet.

I want the main content aligned in the center of the page (at the moment, it is a bit to the right. It is best to see this in my code snippet below in full screen mode). I also want the nav-bar to touch the main content on the side.

I have tried things like:

margin: 0 auto;
text-align: center;
justify-content: center;

between all sorts of different elements to see a result, but not much really happens.

What am I missing?

:root {
  --primary: #FFF5E6;
  --dark: #E5DBB7;
  --darker: #CAC198;
  --red: #D32929;
  --yellow: #FACD1E;
  --darkerRed: #7F2122;
  --black: #333;
}

@font-face {
  font-family: 'Caesar', sans-serif;
  src: url(CAESAR.TTF);
}

html {
  box-sizing: border-box;
  color: var(--black);
}

body {
  background: var(--primary);
}

.wrapper {
  display: grid;
  grid-gap: 75px;
}

.mid-container {
  display: grid;
  grid-gap: 0px;
  grid-template-areas: 'main-nav main-content';
  border: dotted;
  gap: 0;
}

.main-nav ul {
  display: grid;
  grid-gap: 0px;
  padding: 0;
  margin: 0;
  list-style: none;
  grid-template-columns: 1fr;
}

.main-nav a {
  background: var(--darkerRed);
  display: block;
  text-decoration: none;
  text-align: left;
  padding: 0.8rem;
  color: whitesmoke;
  text-transform: uppercase;
  font-size: 1.1rem;
  font-family: "Caesar";
}

.main-nav a:hover {
  background: var(--yellow);
  color: var(--black);
}

.main-nav {
  grid-area: main-nav;
}

.main-content {
  grid-area: main-content;
  width: 50%;
  background: var(--dark);
  padding: 1.6rem;
  font-family: "Caesar";
  align-self: center;
  justify-self: center;
}

.main-content img {
  width: 150px;
  float: right;
  margin-left: 0.5rem;
}

.top-container h1 {
  text-align: center;
  font-family: 'Caesar';
  font-size: 56px;
  color: var(--red);
  margin-top: 0;
}

.top-container h3 {
  text-align: center;
  font-family: 'Caesar';
  font-size: 48px;
  color: var(--red);
  margin-top: 0;
}

.footer {
  text-align: center;
  color: var(--red);
}

<div >

  <section >
    <header >
      <h1>Caracalla</h1>
      <h3>(188-217)</h3>
    </header>
  </section>

  <section >

    <nav >
      <ul>
        <li><a href="#">Early Life</a></li>
        <li><a href="#">Reign as senior emperor</a></li>
        <li><a href="#">Reign as sole emperor</a></li>
        <li><a href="#">Death</a></li>
      </ul>
    </nav>

    <main >
      <h4>Introduction</h4>
      <img src="cara.png" alt="portrait">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias consectetur nostrum aspernatur debitis quo, qui corrupti quae facilis architecto ipsam rem eos. Deleniti temporibus architecto consequuntur voluptates animi dicta quo reprehenderit,
        magnam eius repellat doloremque in qui adipisci asperiores iure saepe commodi inventore alias mollitia, numquam at. Consequatur porro possimus blanditiis, nemo, incidunt facere quaerat excepturi quidem doloremque, voluptatum temporibus odio illum
        aliquam cum adipisci eos. Quisquam sequi, ad aliquam error laborum nobis excepturi iusto, incidunt nemo ab optio quaerat natus possimus praesentium quae temporibus vel minus iste vero, aperiam adipisci laudantium consequuntur culpa. Numquam soluta
        nam provident maxime voluptate!</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum nobis, harum eius quos suscipit eligendi nesciunt excepturi animi deleniti facere ab illo, explicabo voluptates eos assumenda asperiores eum alias aliquam quas autem ducimus earum
        ea. Odio, nisi iusto molestiae beatae labore vero inventore voluptas architecto, quis deleniti itaque magnam sed! Illum voluptatum minus nulla ad consequuntur, modi, praesentium vel rem placeat impedit repudiandae consectetur? Ipsa, hic molestias
        reiciendis consectetur commodi provident consequatur at quis. Quidem aperiam exercitationem eum illo dolore itaque nobis assumenda suscipit ipsum corporis? Quaerat sapiente nisi, facere culpa iste maxime nesciunt suscipit! Animi et tempora nostrum
        voluptatem!
      </p>
    </main>
  </section>

  <footer >
    <p>Copyright &copy; AG</p>
  </footer>
</div>

CodePudding user response：

This will center all the children inside the wrapper div but you may want to watch out for their widths. .wrapper {display: grid;place-items:center;};

CodePudding user response：

.mid-container {
  display: grid;
  justify-content: center;
  align-content: center;
}