The freeCodeCamp Forum

Why isn't flexbox working?

InputLite January 6, 2019, 12:25pm 1

my site is up. look at this.

css:

.container2 {
	display: flex;
	flex-direction: row;
}

html:


        <nav>
		<div class="container2">
          <ul>
            <li>Menu item 1 
				<ul> 
					<li><a href="#">Sub Item 1</a></li> 
					<li><a href="#">Sub Item 2</a></li> 
					<li><a href="#">Sub Item 3</a></li> 
				</ul> 
          </ul>
		  
		        <li>Menu item 1 
				<ul> 
					<li><a href="#">Sub Item 1</a></li> 
					<li><a href="#">Sub Item 2</a></li> 
					<li><a href="#">Sub Item 3</a></li> 
				</ul> 
          </ul>
		  </div>
        </nav>

why isn’t flex box working?

lasjorg January 6, 2019, 12:52pm 2

That is invalid HTML.

Just because something doesn’t do what you want, doesn’t mean it’s not working. It means it’s not doing what you want it to do. As we don’t know what that is, it’s pretty hard to help you. Post a link to the site and tell us what it is you expect with your CSS.

Also, you’re in the wrong forum section (edit: not anymore).

camper January 6, 2019, 1:03pm 3

@InputLite, to add to what @lasjorg wrote, I think I see what you’re trying to do. Make sure all of your elements have closing tags and the closing tags are in the correct places. For example, where is the closing tag for the first <li>Menu item 1?

Then, like @lasjorg writes, post a link to your code here with an explanation of what you’re trying to do, if you can’t get it working, and we’ll help.

InputLite January 6, 2019, 1:31pm 4

I’m trying to make a drop down menu.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Affordable and professional web design">
	  <meta name="keywords" content="web design, affordable web design, professional web design">
  	<meta name="author" content="Brad Traversy">
    <title>Acme Web Deisgn | Welcome</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <header>
	
      <div class="container">
        <div id="branding">
          <h1><span class="highlight">Acme</span> Web Design</h1>
        </div>
		
        <nav>
		<div class="container2">
          <ul class="menu">
            <li class="main-menu">Menu item 1 
				<ul class="menu3"> 
					<li class="submenu1"><a href="#">Sub Item 1</a></li> 
					<li class="submenu1"><a href="#">Sub Item 2</a></li> 
					<li class="submenu1"><a href="#">Sub Item 3</a></li> 
				</ul> 
          </ul>
		  
		        <li>Menu item 1 
				<ul> 
					<li class="submenu1"><a href="#">Sub Item 1</a></li> 
					<li class="submenu1"><a href="#">Sub Item 2</a></li> 
					<li class="submenu1"><a href="#">Sub Item 3</a></li> 
				</ul> 
          </ul>
		  </div>
        </nav>
      </div>
    </header>

    <section id="showcase">
      <div class="container">
        <h1>Affordable Professional Web Design</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum.</p>
      </div>
    </section>

    <section id="newsletter">
      <div class="container">
        <h1>Subscribe To Our Newsletter</h1>
        <form>
          <input type="email" placeholder="Enter Email...">
          <button type="submit" class="button_1">Subscribe</button>
        </form>
      </div>
    </section>

    <section id="boxes">
      <div class="container">
        <div class="box">
          <img src="./img/logo_html.png">
          <h3>HTML5 Markup</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
        </div>
        <div class="box">
          <img src="./img/logo_css.png">
          <h3>CSS3 Styling</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
        </div>
        <div class="box">
          <img src="./img/logo_brush.png">
          <h3>Graphic Design</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
        </div>
      </div>
    </section>

    <footer>
      <p>Acme Web Deisgn, Copyright &copy; 2017</p>
    </footer>
  </body>
  <script src="js.js">
  </script>
</html>

body{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
}

.container{
  width:80%;
  margin:auto;
  overflow:hidden;
}

ul{
  margin:0;
  padding:0;
  
}

nav ul {
	float: right;
}

nav ul li {
	float: right;
	list-style: none;
}

nav ul li ul {
	display: none;
}
.container2 {
	display: flex;
	flex-direction: row;
}

.button_1{
	-webkit-height: 38px;
	-moz-height: 38px;
  height:38px;
  background:#e8491d;
  border:0;
  padding-left: 20px;
  padding-right:20px;
  color:#ffffff;
}

.dark{
  padding:15px;
  background:#35424a;
  color:#ffffff;
  margin-top:10px;
  margin-bottom:10px;
}

/* Header **/
header{
  background:#35424a;
  color:#ffffff;
  padding-top:30px;
  min-height:70px;
  border-bottom:#e8491d 3px solid;
}

header a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:16px;
}

header li{
  float:left;
  display:inline;
  padding: 0 20px 0 20px;
}

header #branding{
  float:left;
}

header #branding h1{
  margin:0;
}

header nav{
  float:right;
  margin-top:10px;
}

header .highlight, header .current a{
  color:#e8491d;
  font-weight:bold;
}

header a:hover{
  color:#cccccc;
  font-weight:bold;
}

#showcase{
  min-height:400px;
  background:url('spacex.jpg') no-repeat 0 -400px;
  text-align:center;
  color:#ffffff;
}

#showcase h1{
  margin-top:100px;
  font-size:55px;
  margin-bottom:10px;
}

#showcase p{
  font-size:20px;
}

/* Newsletter */
#newsletter{
  padding:15px;
  color:#ffffff;
  background:#35424a
}

#newsletter h1{
  float:left;
}

#newsletter form {
  float:right;
  margin-top:15px;
}

#newsletter input[type="email"]{
  padding:4px;
  height:25px;
  width:250px;
}

/* Boxes */
#boxes{
  margin-top:20px;
}

#boxes .box{
  float:left;
  text-align: center;
  width:30%;
  padding:10px;
}

#boxes .box img{
  width:90px;
}

/* Sidebar */
aside#sidebar{
  float:right;
  width:30%;
  margin-top:10px;
}

aside#sidebar .quote input, aside#sidebar .quote textarea{
  width:90%;
  padding:5px;
}

/* Main-col */
article#main-col{
  float:left;
  width:65%;
}

/* Services */
ul#services li{
  list-style: none;
  padding:20px;
  border: #cccccc solid 1px;
  margin-bottom:5px;
  background:#e6e6e6;
}

footer{
  padding:20px;
  margin-top:20px;
  color:#ffffff;
  background-color:#e8491d;
  text-align: center;
}

/* Media Queries */
@media(max-width: 768px){
  header #branding,
  header nav,
  header nav li,
  #newsletter h1,
  #newsletter form,
  #boxes .box,
  article#main-col,
  aside#sidebar{
    float:none;
    text-align:center;
    width:100%;
  }

  header{
    padding-bottom:20px;
  }

  #showcase h1{
    margin-top:40px;
  }

  #newsletter button, .quote button{
    display:block;
    width:100%;
  }

  #newsletter form input[type="email"], .quote input, .quote textarea{
    width:100%;
    margin-bottom:5px;
  }
}

no JS yet… I might have to use it for the drop down menu. idk.

InputLite January 6, 2019, 1:34pm 5

How’s it invalid HTML? That’s the syntax for flex box according to a website.

camper January 6, 2019, 1:35pm 6

You seem to be missing some closing tags.

InputLite January 6, 2019, 1:35pm 7

I’m trying to set a background color to my drop down list item.

I tried

ul li ul li {
background-color: black;
}
and it didn’t work. wtf?

lasjorg January 6, 2019, 1:48pm 8

This statement doesn’t even make any sense. HTML structure and CSS syntax are two different things. If you have invalid HTML all bets are off, you need to fix the HTML first before worrying about CSS syntax.

Probably because your HTML and/or selectors are all out of whack.

I’m sure you don’t want to hear this, but instead of relying on websites and other people so much. How about you just start by learning some more of the basics first. If you just copy/paste code from somewhere you will keep getting into issues you can’t fix because you don’t understand what the code does.

lasjorg January 6, 2019, 2:00pm 9

Just to be clear. I don’t mean to suggest you can’t ask questions here or get help from various websites. I just mean the better your own understanding of this subject is, the less confusing it will be for you when making your projects.

1 Like

InputLite January 6, 2019, 5:34pm 10

It’s the right flex box syntax and it doesn’t work and you say it’s invalid?

lasjorg January 6, 2019, 5:58pm 11

OK let’s try this again.

“flex box syntax” is CSS, not HTML. Your HTML is what is invalid. The two things are not related. Well, other than the fact that having invalid HTML can break any CSS.

AE448 January 6, 2019, 10:53pm 12

You’re missing closing ul and li tags on menu item 1. Judging by your replies you need to go back to square 1 and start again. Not being mean but if you dont understand these very basic principles then you just need to watch more YouTube vids and follow the training courses on this site. I know the video you’ve been watching as I’ve seen it myself. My advice is to follow along and copy it word for word as hes doing it. Pause, play and repeat.

empanada March 6, 2021, 2:48pm 13

I made an account just to tell you that you are an absolute jerk. Every comment I have seen from you is delivered with absolute condescension and rudeness. If you are so great, then why are you here? Why are you bothered by people asking basic questions. Bet you feel like a big man stomping on people trying to learn. If you are a mod here then this website must be awful.