CSS Flex Has no Effect on the HTML Element

HTML-CSS
#1

Tell us what’s happening:
I am trying to apply style from the CSS on the HTML element, but it has no effect. I tried different approaches (by using class and by using element’s ID).

Problem keeps resurfacing (yesterday I solved it by accident), so I really need to understand what is going on.

Many thanks.

P.S. I tried moving #email styling inside the footer parentheses. Also tried placing “display: flex” inside #email styling.

Your code so far
HTML:

<!---code--->
<footer>
  <form id="form" action=" https://www.freecodecamp.com/email-submit">
    <input 
      name="email"
      id="email"
      type="email" placeholder="Enter e-mail"
      required
     />
    <button type="submit">Submit</button>
  </form>
</footer> 

CSS code:
<!---code--->
footer {
  display:flex;
 }
#email {
  align-items: end;  
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

#2

P.S. For some reason my HTML code will not appear in this post. Don’t know how to fix it. :grimacing:

#3

Use backticks. Put HTML in between a pair of 3 backticks.

Like this,

Screenshot at 2020-08-31 01-10-55
Screenshot at 2020-08-31 01-10-551366×768 69.3 KB

1 Like
#4

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

1 Like
#5