CODEWITHSUNDEEP
htmlcss
Charles Xavier
Charles Xavier

Reputation: 41

I am fairly new to having issues with css DISPLAY:FLEX

I am fairly new to CSS. I am following a guide on youtube and the code seems to work in the video but as much as I try I can't display:flex function on my container in order to align my elements horizontally. As much as I try they are being positioned horizontally Any help is appreciated.

Here is my HTML and CSS code:

Here is my CSS:

    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
    
    
    
    
    /*Global configuration. Setting box sizing border-box to included padding and margin in the element size.*/
    
    * {
        box-sizing: border-box; 
        padding: 0;
        margin: 0;
    }
    
    body {
        font-family: 'Lato', sans-serif;
        color: #333;
        line-height: 1.6;
    }
    
    ul {
        list-style-type: none;
    }
    
    a {
        text-decoration: none;
        color: #333;
    }
    
    h1, h2 {
        font-weight: 300;
        line-height: 1.2;
        margin:  10px 0;
    }
    
    p {
        margin: 10px 0;
    }
    
    img {
        width: 100%; /*Restrain image size to be equal to container size*/
        
    }
    
    .navbar {
        background-color: #047aed;
        color: #fff;
        height: 70px;
    
    }
    
    .container {
        max-width: 1100px;
        margin: 0 auto; /* 0 top and bottom and auto on left and right*/
        overflow: auto; /* sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.*/
        padding: 0 40px;
         }
    
    .flex {
        flex-direction: row;       
        }
 <body>
            <!-- Navbar-->
            <div class="navbar">
                <div class="container flex">
                    <h1 class="logo">Charles
                        <nav>
                            <ul>
                                <li> <a href="index.html">Home</a></li>
                                <li> <a href="projects.html">Projects</a></li>
                                <li> <a href="hobbies.html">Hobbies</a></li>
                            </ul>
                        </nav>
                    </h1>
                </div>
            </div>
        </body>

Upvotes: 0

Views: 56

Answers (3)

ABDUL SALAM
ABDUL SALAM

Reputation: 85

* {
        box-sizing: border-box; 
        padding: 0;
        margin: 0;
    }
    
    body {
        font-family: 'Lato', sans-serif;
        color: #333;
        line-height: 1.6;
    }
    
    ul {
        list-style-type: none;
    }
    
    a {
        text-decoration: none;
        color: #333;
    }
    
    h1, h2 {
        font-weight: 300;
        line-height: 1.2;
        margin:  10px 0;
    }
    
    p {
        margin: 10px 0;
    }
    
    img {
        width: 100%; /*Restrain image size to be equal to container size*/
        
    }
    
    .navbar {
        background-color: #047aed;
        color: #fff;
        height: 70px;
    
    }
    
    .container {
        max-width: 1100px;
        margin: 0 auto; /* 0 top and bottom and auto on left and right*/
        overflow: auto; /* sets the desired behavior for an element's overflow — i.e. when an element's                         content is too big to fit in its block formatting context — in both         directions.*/
        padding: 0 40px;
         }
    
    nav ul{
        margin-top:20px;
        display:flex;
        justify-content:space-between;
        }
<body>
            <!-- Navbar-->
            <div class="navbar">
                <div class="container flex">
                    <h1 class="logo">Charles
                        <nav>
                            <ul>
                                <li> <a href="index.html">Home</a></li>
                                <li> <a href="projects.html">Projects</a></li>
                                <li> <a href="hobbies.html">Hobbies</a></li>
                            </ul>
                        </nav>
                    </h1>
                </div>
            </div>
</body>

Just Add display:flex property to your "ul" inside nav element. There is no need to add extra class. Then you can play with justify-content property for how you want them to display horizontally. Note: We always apply display flex to wrapper/container/ or a parent element whose childs we want to be treated as "flex-items".

Upvotes: 0

veesar
veesar

Reputation: 430

There are a couple of things to correct:

  • You use the class .flex but it is not defined as a flexbox in the CSS. Change the definition to
.flex {
  display:flex;
  flex-direction: row;
}
  • Your flex container div has only one child which is the <h1>. With this one child, your div is showing as expected. Assuming, you want the logo and the nav in the same row, you need to change your HTML. You also need to make the list in the <nav> as a flexbox, so that its children will be displayed in a row.

<body>
  <!-- Navbar-->
  <div class="navbar">
    <div class="container flex">
      <h1 class="logo">Charles</h1>
      <nav>
        <ul class="flex">
          <li> <a href="index.html">Home</a></li>
          <li> <a href="projects.html">Projects</a></li>
          <li> <a href="hobbies.html">Hobbies</a></li>
        </ul>
      </nav>        
    </div>
  </div>
</body>

Upvotes: 2

RUSSYQ10
RUSSYQ10

Reputation: 1

flex-direction has no effect on this element because it is not a Flex container.

Try adding display: flex or display: inline-flex.

Upvotes: 0

Related Questions