Project3: Problems with Flex within <style> order

I’m a 67 y.o. nerd, trying to complete this course to a) exercise my brain and b) to keep in touch with the ‘real world’.

Right now, I’m on Project 3 Landing Page.
I’m currently struggling with Flex.

I’ve got all the user stories in my code (not pretty, admittedly, but I plan to make it prettier later).

However, to my chagrin:
If my Flex definitions aren’t placed as the very first item in my <style>, it doesn’t work! Anything I place beforehand (besides the one line you’ll see) results in my flex-container being ignored.

And when I get a ‘working’ version going and subsequently split the code into CSS and HTML for the – low and behold, it’s screwed again!!

Just can’t figure out, why not? It’s driving my nuts.

I’m sure you’ll see the error quickly. Please explain the principle behind it.
My thanks in advance.

Here’s the (ugly) code:


          body {
          background: url(;
               }     /*This line before the container doesn't affect the flex display. Everything else does*/       
           #box-container {
            background: #DCDCDC;
            display: flex;
            height: 200px;
            align-items: center;
            justify-content: space-around;
          #hotels {
            background-color: #1E90FF;
            width: 200px;
            font-size: 24px;

          #museums {
            background-color: #FF4500;
            width: 200px;
            font-size: 24px;

          #restaraunts {
            background-color: #F4A460;
            width: 200px;
            font-size: 24px;
          #nav-bar {
            position: fixed; 
            top: 0;
            left: 0;
            z-index: 9999;
            width: 100%;
            height: 50px;
            background-color: #48D1CC;

           .nav-link {

           ul {
	   list-style-type: none; 
           margin: 0;
           padding: 0; 					

           li {
           display: inline; 
           margin-right: 20px;

          h1 {
             color: #FFFF00; 
             font-size: 30px;
             font-family: sans-serif, monospace;
             background: #800080;
             padding: 20px;

          p   {
            color: #000;
            font-size: 18px;
            font-family: sans-serif, monospace;

         @media (max-height: 800px){ 
          p {
            font-size: 10px;
            } /*Just included to forfill the project criteria. Not exactly useful but all that's been taught until now. Sensible suggestions welcomed */

         video { 
            object:position: 50% 50%;
            object-fit: contain;
       <header id="header"> 

          <h1 id="titel"> Visting Munich </h1>

            <img src="" width="150" height="30" border="0" alt="Munich City Portal"><br>

          <nav id="nav-bar">
               <li><a class="nav-link" href="#hotels">Hotels</a></li>
               <li><a class="nav-link" href="#museums">Museums</a></li>
               <li><a class="nav-link" href="#restaraunts">Restaraunts</a></li>
               <li><a class="nav-link" href="#email">Receive our Newsletter</a></li>
               <li><a class="nav-link" href="#video">Watch a video</a></li>          

        <form id="form" action="">                    
             <label id="email" for="email">Newsletter:</label><br>
             <input type="email" id="email" name="email" size="50"  placeholder="Please enter your eMail address"> 

             <button id="submit" type="submit" >Submit to subscribe </button>

           <p>Watch a video of Munich by sunset</p>	
           <video id=“video“ width="320" height="240" controls>
          <source src="" type="video/mp4">Your browser does not support the video format.

<div id="box-container">
  <div id="hotels"><p>Hotels</p></div>
  <div id="museums"><p>Museums</p></div>
  <div id="restaraunts"><p>Restaraunts</p></div>
	<div id="about us">About us</div>

It would be better if you just gave us the link to your codepen project so we can play around with it ourselves.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

I agree with bbsmooth, please post a link to your Codepen instead.

But you do have errors in both the HTML and CSS.

I would suggest switching the Syntax Highlighting on Codepen. It will help catch syntax errors.

Go to your Codepen profile settings. Under “Editor Preferences” switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors.

Press the down arrow to the right of the HTML code box and select Tidy HTML. Now, look at the HTML, if there are issues you should see tags marked in red. That is the new Syntax Highlighting showing you where the problems are.

Press the down arrow to the right of the HTML code box and select “Analyze HTML”.

Then do the same for the CSS.

Well, let’s see if I can do it
Can be that I’m too junior as to know how to use codepen.
Please be patient - I’m trying!

And thanks that you answered

As an old person, I’m not even used to using a forum! Please have patience. I’m very grateful, that you are taking the time to help me. Thank you.
Anyway, try this;

Thanks, that is the correct codepen URL.

I agree with @lasjorg, you first need to clean up your HTML and CSS syntax as you’ve got a bunch of errors in them. Once they are error free then we can revisit your initial issue.

A few extra hints:

  • Don’t use <br> to create vertical space in your HTML. Use CSS margin/padding instead.
  • Comments in CSS use the format /* comment here */. You can’t use HTML style comments (<!-- comment here -->) in CSS.

P.S. I’m not accepting “old guy” as an excuse. I’m no Spring chicken myself so you can’t play that card with me :smiley:

Thanks. I knew it to be dirty, but haven’t yet delved into padding. Will do,
As to comments: You’re right, of course. I think I’ve understood to discern between HTML comment and CSS comments. Thanks for your help.

  1. On Codepen, when you use the CSS code box you should not use the <style></style> element. That’s an HTML element and only CSS should go in the CSS code box.

  2. You didn’t close the media query (missing } at end).

  3. The property is object-position, not object:position.

  4. When I fix the CSS errors the #box-container selector can be located anywhere in the CSS and its flex properties still work.

Without spilling the beans, can you give me a clue as to what or where I should clean up, I’ve only been in this since 18 days, so my comprehension is as limited. But my admiration (and fear) about the powerfulness of this programming.

Sorry, incomplete : is increasing.

@lasjorg gave you some good hints.

Also, if you click the down arrow in the upper right of both the HTML and CSS editors in codepen and select “Analyze HTML/CSS” then it will point you to the errors.

OK. That’s explicit. Thanks. I’ll look into it asap and will try to digest,
But tomorrow, It’s 9.30 p.m. here and I’ve been doing the course since 9 a.m. Have had enough.
Many thanks for your help - great that people are out there willing to help.

Many thanks lasjorg - kind of you dealing with beginners. I will look into all you have mentioned (tomorrow) and hope to learn and profer.
Great that you are so prepared to deal with such beginner questions, Gives me hope.

1 Like

Thanks for helping a beginner- I profit.
Good tip - will check it out. Merci.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.