How to align content in the center with CSS while using grid?

Axel Görnebrand 0
Viewed 55

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;
    place-items:center;
   
}

.mid-container {
    display: grid;
    grid-gap: 0px;
    grid-template-areas: 
    'main-nav main-content main-content';
    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;
    background: var(--dark);
    padding: 1.6rem;
    font-family: "Caesar";
    max-width: 700px;
    margin-right: 175px;
        
}

.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);
}
<!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>Caracalla</title>
</head>

<body>
    <div class="wrapper">

        <section class="top-container">
            <header class="header">
                <h1>Caracalla</h1>
                <h3>(188-217)</h3>
            </header>
        </section>  
        
        <section class="mid-container">

        <nav class="main-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 class="main-content">
            <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 class="footer">
            <p>Copyright &copy; AG</p>
        </footer>

    </div>
 <link rel="stylesheet" type="text/css" href="styling.css" /> 
</body>
</html>

css-grid css html
2 Answers

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;};

Code_Samurai0 
.mid-container {
  display: grid;
  justify-content: center;
  align-content: center;
}
Imtiaz Uddin0
Related