Display Declaration: Nav Bar

Guys, I’m having trouble understanding to make elements center spread evenly across the box or page. For example, the Nav bar or other content. Below are my 2 snippets. I don’t understand what is the most effective way to get this done.

  • I’ve tried using display: flex / display: inline-flex with Justify-content: space-around (did not work)
  • I’ve tried display: inline / display: inline-block with text align: center
  • I’m trying to do it without using box elements like padding, margin etc…

.navbar li{
display: inline;
}

.button-container {
display: inline-block;
border: solid 1px black;
padding: 5px 30px;
border-radius: 10px;
}

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Style Guide</title>
    <link rel="stylesheet" href="./styles.css">
    <!---Fonts-->
    <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=Dancing+Script:[email protected]&family=Londrina+Solid:wght@100;300;400;900&family=Roboto+Slab:[email protected]&display=swap" rel="stylesheet">
<body>
    <header class="header">
        <h1>My Website Style Guide</h1>
        <nav class="navbar">
            <ul>
                <li><a href="">Instructions</a></li>
                <li><a href="#colors">Colors</a></li>
                <li><a href="#">Font Styles</a></li>
                <li><a href="#">Text Styles</a></li>
            </ul>
        </nav>
    </header>
    <main class="main">
        <section class="instructions">
            <h2>Instructions</h2>
            <p>Below you'll find a layed out theme that you can as a guideline to build your site.  Colors are a very important and should compliment eachother.   Color scheme provide nice visual that are pleasing to the eyes and would make you visitor vist more frequently.  Fonts can utilized to provide withter the mood of the site.  there are some fonts that are playful and some that are serious.  Choosing the right one can is crucial as well.  Showing consistency throughout the page shows professionalism, thought and conhesivenemss.  your font sizes, text styling should be consisten throughout the page.  Check out the theme below. </p>
        </section>
        <!--Colors-->
        <section class="container">
            <h2 class="#colors">Colors</h2>
            <div class="color-container">
                <div class="color-panel sage">
                    <p class="color-label">Sage</p>
                    <p class="color-hex">#CACAAA</p>
                </div>
                    
                <div class="color-panel sunset">
                    <p class="color-label">Sunset</p>
                    <p class="color-hex">#EEC584</p>
                </div>
                    
                <div class="color-panel tan">
                    <p class="color-label">Tan</p>
                    <p class="color-hex">#C8AB83</p>
                </div>
                    
                <div class="color-panel dark-cyan">
                    <p class="color-label">Dark Cyan</p>
                    <p class="color-hex">#55868C</p>
                </div>
                    
                <div class="color-panel rose-taupe">
                    <p class="color-label">Rose Taupe</p>
                    <p class="color-hex">#7F636E</p>
                </div>
                    
        </section>
        <!--Fonts-->
        <section class="container">
            <h2>Font Styles</h2>
            <div class="font-container">
                <div class="font-panel roboto-slab">
                    <p class="font-label roboto-slab">Roboto Slab</p>
                    <p class="regular roboto-slab">Whereas recognition of the inherent dignity</p>
                    <p class="bold roboto-slab">Whereas recognition of the inherent dignity</p>
                    <p class="italics roboto-slab">Whereas recognition of the inherent dignity</p>
                </div>
                <div class="font-panel dancing-script">
                    <p class="font-label">Dancing Script</p>
                    <p class="regular dancing-script">Whereas recognition of the inherent dignity</p>
                    <p class="bold dancing-script">Whereas recognition of the inherent dignity</p>
                    <p class="italics dancing-script">Whereas recognition of the inherent dignity</p>
                </div>
                <div class="font-panel londrina-solid">
                    <p class="font-label">Londrina Solid</p>
                    <p class="regular londrina-solid">Whereas recognition of the inherent dignity</p>
                    <p class="bold londrina-solid">Whereas recognition of the inherent dignity</p>
                    <p class="italics londrina-solid">Whereas recognition of the inherent dignity</p>
                </div>
            </div>

        </section>
        <!--Text Styles-->
        <section class="container">
            <h2>Text Styles</h2>
            <div class="text style-container"><h1>H1: Main page heading</h1></div>
                <ul>
                    <li>Font-Family: Londrina Solid</li>
                    <li>Font-Weight: 700px (bold)</li>
                    <li>Font-size: 26px</li>
                </ul>
            <div class="text style-container"><h2>H2: Sub heading</h2></div>
                <ul>
                    <li>Font-Family: Dancing Script</li>
                    <li>Font-Weight: 500px</li>
                    <li>Font-size: 18px</li>
                </ul>
            <div class="text style-container"><p>P: Paragraph Text</p></div>
                <ul>
                    <li>Font-Family: Roboto Slab</li>
                    <li>Font-Weight: 400px (regular)</li>
                    <li>Font-size: 14px</li>
                </ul>
        </section>
        <section class="container">
            <h2>Button Style</h2>
            <div class="button-container sage">
                <div class="button-label">
                    <p>Button</p>
                </div>
            </div>
            <div class="button-container">
                <div class="button-label">
                    <p>Button</p>
                </div>
            </div>
            <div class="button-container">
                <div class="button-label">
                    <p>Button</p>
                </div>
            </div>
        </section>
    </main>
    
</body>
</html>

CSS Code

/*Universal Styling*/
body {
    background-color: #fff;
}

h1 {
    font-family: 'londrina solid', serif;
    font-weight: 700px;
    font-size: 26px;
}

h2 {
    font-family: 'dancing script', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: 500px;
    font-size: 18px;
    text-align: center;
}

p {
    font-family: 'roboto slab', Arial, Helvetica, sans-serif;
    font-weight: 400px;
    font-size: 14px;
}

.container {
    border: 2px solid;
    padding: 10px;
    margin: 20px;
}

/*Header*/

.navbar li{
    display: inline;
}
/*Colors Section*/

.sage {
    background-color: #cacaaa;
    display: inline-block
}

.sunset {
    background-color: #eec584;
    display: inline-block
}

.tan {
    background-color: #c8ab83;
}

.dark-cyan {
    background-color: #55868C;
}

.rose-taupe {
    background-color: #7f636E;
}

.color-panel {
    width: 40%;
    text-align: center;
    display: inline-block
}

/*Font-Style Section*/
.roboto-slab {
    font-family: "roboto-slab", Arial, Helvetica, sans-serif;
}

.dancing-script {
    font-family: "dancing script", 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.londrina-solid {
    font-family: "londrina-solid", serif;
}

.font-label {
    text-decoration: underline;
}

.bold {
    font-weight: 700;
}

.italics {
    font-style: italic;
}

.color-container {
    display: inline-block;
}
/*Text-Style Section*/

/*Button Style Section*/
.button-container {
    display: inline-block;
    border: solid 1px black;
    padding: 5px 30px;
    border-radius: 10px;
}

Hi @1michaelbrito !
I tried your code in codepen.io and I imagine you want to see something like this:
image

If this is the case, this could help:

  1. While using flex, you have to think about flex items and flex containers.
  2. Flex containers define how to organize flex items in a general manner.
  3. Flex items can, if you want to, go against the general rules defined by its flex container (recommended: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks).

So, you have a div.button-container and I guess you tried to use flex with it to define the layout. Nonetheless, that element is a flex item, not a flex container (even when the name you gave to the class may say otherwise). Each .button-container is a child of the section.container class, so the .container is the one that may use display: flex, become a flex container, and dictate how to organize its children.

If you add display: flex and justify-content: space-around to .container, then you will have your buttons ordered. Well…, except for a little problem: the h2 element, which also is a direct child of .container, will also join the party:

image

I could tell you what to do to solve this, but I think that if I correctly assesed what you’re having problems with, then you can find the solution for this last part.

Keep going!

2 Likes

Thank you for the explanation!