What is preventing my page from being horizontally centered?-CodePudding

The picture, description, ingredients, and steps are all under the <div > with this css:

.content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

but my content still shows up on the left side of the page. What am I doing wrong?

Code:

html {
    font-family: Helvetica, Arial, sans-serif;
}

.header {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
}

img {
    width: 350px;
    /* height: auto; */
}

.item img:hover {
    transform: scale(1.05);
}

.content-home {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: auto;
}

.content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.item {
    height: 600px;
    margin: 12px;

    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 220px;
    text-align: center;
}

.left {
    display: flex;
    flex-direction: column;
}

.left img {
    /* padding-left: 30px; */
    display: flex;
    flex-direction: column-reverse;
    padding-top: 23px;
}

.top-right {
    display: flex;
    flex-direction: column;
    padding-left: 60px;
    padding-right: 80px;
    padding-top: 0px;
    border-top: 0px;
    margin-top: 0px;
}

.spaghettiHeader {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
}

.gyudonHeader {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
}

.calderetaHeader {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
}

.description {
    display: flex;
    flex-direction: column;
    border: 10px;
}

<!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>Spaghetti Aglio, Olio, e Peperoncino con Bottarga</title>
    <link rel="stylesheet" href="../index.css">
</head>

<body>
    <div >
        <h1>Spaghetti Aglio, Olio, e Peperoncino con Bottarga</h1>
    </div>
    
    <div >
        <div >
            <img src="../photos/spaghettiAglio1200x1800.jpeg">
        </div>
    
        <div >
            <h2>Description</h2>
            <p> Muggine bottarga (cured mullet roe) is an ancient traditional food from the island of Sardinia in Italy. 
            I have enjoyed this treat for so many years I just had to share it with you. A classic pasta dish from Italy 
            becomes a specialty by adding bottarga to it. Enjoy!
            </p>
            

            <h3>Ingredients</h3>
            <ul>
                <li>1 (16 ounce) package spaghetti</li>
                <li>¼ cup extra-virgin olive oil, or more to taste</li>
                <li>2 cloves garlic, minced</li>
                <li>1 red chile pepper, seeded and minced</li>
                <li>2 ounces grated Sardinian mullet bottarga, divided</li>
                <li>4 tablespoons chopped flat-leaf (Italian) parsley</li>
                <li>1 small lemon, zested</li>
            </ul>
            <h3>Steps</h3>
            <ol>
                <li>Bring a large pot of lightly salted water to a boil. Cook spaghetti in the boiling water, stirring occasionally, until tender yet firm to the bite, about 12 minutes.</li>
                <li>Meanwhile, heat oil in a large skillet or wok over medium heat.</li>
                <li>Add garlic to the oil and cook until just warmed through, 1 to 2 minutes. Add chile pepper and stir together, reducing the temperature to medium-low. Continue stirring. The garlic should never become dark brown or crispy. If this has happened, the garlic is burnt and no longer appropriate for consumption.</li>
                <li>Drain the pasta, reserving at least 1 cup pasta water. Add the spaghetti to the oil mixture, still on medium-low heat. Stir or toss until all the spaghetti is well coated. Add 3/4 of the bottarga and stir to mix with the spaghetti, adding the reserved pasta water to hydrate as needed. There should be a little "sauce" when serving but not soupy.</li>
                <li>Divide onto 4 plates and sprinkle with chopped parsley and lemon zest; squeeze lemon juice over and sprinkle remaining bottarga on top right before serving.</li>
            </ol>
        </div>
    </div>

    <div >
        <a href="../index.html">home</a>
    </div>

</body>
</html>

this is what the page looks like: https://imgur.com/a/4xoiwYI

CodePudding user response：

By default display: flex shows content in 'row' direction which results in the layout you got.

To correct this issue, you can either:

change the flex-direction from row to column by

flex-direction : column; in the content CSS
change the display type of .content element from flex to block

CodePudding user response：

Just add text-align: center; in .content

CodePudding user response：

If you want to center the text inside content class, you can add text-align: center in the content class. It will became like this:

.content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
}

align-items and justify-content only adjust your content's inside tag. While the <div> tag inside content class didn't have their width adjusted. So by default, they're set as width: 100%;

Try to adjust your <div> width to learn more about their interaction. Flexbox Example