Margin: 0 auto confusion

Web Development
1

Hi everyone. I am currently in the midst of completing the challenge project for the 'Improved styling with css" section.

I have a problem. One, i want my text in the div that says the color and the hex code to be centered in the div but it is not happening. Two i want the 4 divs to be centered in the class colorSelection div. I don’t know why its not working.

<!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>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anek+Devanagari:wdth,[email protected],500&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header>
        <h1>My Webstie Style Guide</h1>
    </header>
    
    <section class="colorSection">

        <div class="firstWebsiteColorSection">
            <h2 class="colorSectionTitle">First website color selection</h2>
            <div class="colorSelection">
                <div class="firstWebsiteColor colorCard">
                    <h3>Color 1</h3>
                    <p>#D9EDBF</p>
                </div>
                <div class="firstWebsiteColor2 colorCard">
                    <h3>Color 2</h3>
                    <p>#FF9800</p>
                </div>
                <div class="firstWebsiteColor3 colorCard">
                    <h3>Color 3</h3>
                    <p>#2C7865</p>
                </div>
                <div class="firstWebsiteColor4 colorCard">
                    <h3>Color 4</h3>
                    <p>#90D26D</p>
                </div>
            </div>
            
            
        </div>

        <div class="secondWebsiteColorSection">
            <h2 class="colorSectionTitle">Second website color selections</h2>
            <div class="secondWebsiteColor colorCard">
                <h3>Color 1</h3>
                <p>#003C43</p>
            </div>
            <div class="secondWebsiteColor2 colorCard">
                <h3>Color 2</h3>
                <p>#135D66</p>
            </div>
            <div class="secondWebsiteColor3 colorCard">
                <h3>Color 3</h3>
                <p>#77B0AA</p>
            </div>
            <div class="secondWebsiteColor4 colorCard">
                <h3>Color 4</h3>
                <p>#E3FEF7</p>
            </div>
        </div>
    </section>


</body>
</html>


*{
      font-family: "Anek Devanagari", sans-serif;
    font-weight: 500;

}

.colorSection{
    width: 75%;
    border: 1px solid black;
    margin: 0 auto;
    border-radius: 5px;
}

.colorSectionTitle{
    padding-left: 20px;
}

.colorSelection{
    width: 90%;
    margin: 0 auto;
}


.colorCard{
    width: 18%;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    margin: 0 auto;
}

/* First Website Color Section Styles */


.firstWebsiteColor{
    background-color: #D9EDBF;
}

.firstWebsiteColor2{
    background-color: #FF9800;
}

.firstWebsiteColor3{
    background-color: #2C7865;
}

.firstWebsiteColor4{
    background-color: #90D26D;
}

/* Second Website Color Section Styles */

.secondWebsiteColor{
    background-color: #003C43;
}

.secondWebsiteColor2{
    background-color: #135D66;
}

.secondWebsiteColor3{
    background-color: #77B0AA;
}

.secondWebsiteColor4{
    background-color: #E3FEF7;
}

I just want to center div.color selection evenly… I feel like i can do that with display:flex however i am not on that module yet…

I don’t know if i have made my query clear.

Screenshot 2024-04-27 at 20.11.46 (2)
Screenshot 2024-04-27 at 20.11.46 (2)1920×1080 145 KB

2

Hi @tayamirai !
You can try text-align: center. Add it to .colorSection {}

1 Like
3

Omg thank You!! I don’t know why this works though. This is also another part i don’t get, am i meant to know why it works? Why text-align works…? Or do i just leave it and try to remember it.

4

By default, a text element is of type (display) block. Which means that your h3’s, p’s, etc… will use the whole width of their parent container.
Nonetheless, also by default, the text is aligned-left, so you can read from left-to-right as usual. If you want to change that alignment, you use the text-align property.

This property doesn’t change the width of the element, which is equal to 100% of the parent container. This only changes the alignment of the text inside.

This is the reason why using margin: 0 auto doens’t work for this problem, because the container is already using the whole width, so it cannot be centered (or is centered without margins if you wish).

2 Likes
5

I also struggled with this text-align property! But after some work, everything worked out for me!

6

Hello again! There are a lot of methods to center in CSS, check this detailed guide, you may find this helpful.

8

So I think the underlying issue was how the HTML is a set up, and there was a small class conflict.

I noticed “secondWebsiteColorSection” was missing the “colorSection” div that “firstWebsiteColorSection” had. That can make it difficult to get both sections equal and aligned.

The CSS conflict I noticed was that you used that class “colorSection” twice. This isn’t a problem as long as both classes are going share ALL styling. That seems to also be causing some weird issues when trying to justify or align the content.

I made some small changes and added the code below! Sorry to be long-winded. I just find thorough answers are more beneficial.

<section class="colorSection"> 

// 'I moved this h2 out of the "firstWebsiteColorSection" div so it's not effected by it's parents "display: flex" property'//
        <h2 class="colorSectionTitle">     
             First website color selection
        </h2>

        <div class="firstWebsiteColorSection"> 

// 'I changed this class to "colors", or just anything different that that other section element with the same class name' //
            <div class="colors">
                <div class="firstWebsiteColor colorCard">
                    <h3>Color 1</h3>
                    <p>#D9EDBF</p>
                </div>
                <div class="firstWebsiteColor2 colorCard">
                    <h3>Color 2</h3>
                    <p>#FF9800</p>
                </div>
                <div class="firstWebsiteColor3 colorCard">
                    <h3>Color 3</h3>
                    <p>#2C7865</p>
                </div>
                <div class="firstWebsiteColor4 colorCard">
                    <h3>Color 4</h3>
                    <p>#90D26D</p>
                </div>
            </div>
        </div>
      
// 'I moved this h2 out of the "secondWebsiteColorSection" div so it's not effected by it's parents "display: flex" property '//
         <h2 class="colorSectionTitle">
           Second website color selections
         </h2>
        <div class="secondWebsiteColorSection">

//'This is where I saw you were missing this div in your original code. Making it hard to make both aligned'//
          <div class="colors">
            <div class="secondWebsiteColor colorCard">
                <h3>Color 1</h3>
                <p>#003C43</p>
            </div>
            <div class="secondWebsiteColor2 colorCard">
                <h3>Color 2</h3>
                <p>#135D66</p>
            </div>
            <div class="secondWebsiteColor3 colorCard">
                <h3>Color 3</h3>
                <p>#77B0AA</p>
            </div>
            <div class="secondWebsiteColor4 colorCard">
                <h3>Color 4</h3>
                <p>#E3FEF7</p>
            </div>
           </div>
        </div>
    </section>

*{
     font-family: "Anek Devanagari", sans-serif;
    font-weight: 500;

}

//' I really prefer display: flex, justify-content: center. So I added it to the parent elements - notice how h2s aren't included now ' //

.firstWebsiteColorSection {
  display: flex;
  justify-content: center;
}

.secondWebsiteColorSection {
  display: flex;
  justify-content: center;
}

.colorSection{
    width: 75%;
    border: 1px solid black;
    margin: 0 auto;
    border-radius: 5px;
}

// 'added some styling only these shared styling to the new class 'colors' //
.colors{
    width: 75%;
    border-radius: 5px;
}

.colorSectionTitle{
    padding-left: 20px;
}

.colorSelection{
    width: 90%;
    margin: 0 auto;
}

// 'took our margin styling since it isn't needed now '//
.colorCard{
    width: 18%;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
   
}
9

image
image1911×583 35.2 KB

Assuming this is close to what you were looking for.