Make the button a button and align the list

1

Hi i wonder how i can solve these? Not entirely sure why the button isn’t already following this format as its flex-direction: column.

The ol is tilted to the right also and i can’t see why.

<style>
  #header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
  }

  #nav-bar {
    position: fixed;
    top: 0px;
    width: 100%;
    background: white;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    padding-left: 2em;
  }

  #logo {
    height: 50px;
    width: 50px;
  }

  .nav-right {
    float: right;
    margin: auto;
    background: white;
    text-align: center;
    align-items: center;
  }

  ul {
    width: 35vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    text-align: center;
  }

  li {
    list-style: none;
  }

  #video {
    margin-top: 100px;
  }

  .video-container {
    display: flex;
    justify-content: center;
  }

  .email-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .product {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    margin: 10px;
    border: 1px solid #000;
    border-radius: 3px;
    align-items: center;
    text-align: center;
    background: white;
    padding: 15px 0;
    border: 1px solid;
  }

  #pricing {
    display: flex;
    flex-direction: row;
  }

  .container {
    background: #eee;
  }

  .level {
    background-color: #ddd;
    padding: 15px 0;
    width: 100%;
    font-size: 2rem;
  }

  button {
    border: 0;
    margin: 15px 0;
    background-color: #f1c40f;
    font-weight: 400;
    font-size: 1rem;
  }
</style>

<html>
  <header id="header">
    <nav id="nav-bar">
      <img id="logo" src="mcdonalds.png" />
      <div class="nav-right">
        <ul class="list">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 1</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <section class="container">
    <div class="video-container">
      <iframe
        id="video"
        width="420"
        height="315"
        src="https://www.youtube.com/embed/tgbNymZ7vqY"
      >
      </iframe>
    </div>
    <div class="email-container">
      <h3>Learn more about us</h3>
      <form id="form">
        <input id="email" placeholder="Enter email here" type="email" />
        <button type="submit" href="https://www.freecodecamp.com/email-submit">
          Sign up
        </button>
      </form>
    </div>
    <section id="pricing">
      <div class="product">
        <div class="level">Product 1</div>
        <h2>500</h2>
        <ol>
          <li>info 1</li>
          <li>info 2</li>
          <li>info 3</li>
        </ol>
        <button>submit</button>
      </div>
      <div class="product">
        <div class="level">Product 1</div>
        <h2>500</h2>
        <ol>
          <li>info 1</li>
          <li>info 2</li>
          <li>info 3</li>
        </ol>
        <button>submit</button>
      </div>
      <div class="product">
        <div class="level">Product 1</div>
        <h2>500</h2>
        <ol>
          <li>info 1</li>
          <li>info 2</li>
          <li>info 3</li>
        </ol>
        <button>submit</button>
      </div>
    </section>
  </section>
</html>

Your help is appreciated :slight_smile:

image
image1366×768 79.9 KB

2

Hello @silvercut

If you were to provide a live demo it’d be easier for us to help you. That being said, I hope I can help with the following.

For the button, consider the structure of your markup (I removed the content to focus on the structure itself)

<div>
  <h3></h3>
  <form>
    <input />
    <button>
    </button>
  </form>
</div>

When you apply display: flex to the <div> container, only the child elements which are nested directly in the container are made into flex-items, meaning the heading and the form.
The button is actually nested in a form element, and you’d need specific layout properties for that specific container.

form {
  /* position the input and button elements */
}

For the ol, this is tied to the default styling applied to the ordered list. If you were to look at the developer tools, you’d see multiple property value pairs added in cursive and through the user agent stylsheet. Something similar to the following:

ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

These are similar values to the ones adding a default background and border to <button> elements.

If you were to explicitly set the padding-inline-start property in your stylesheet.

ol {
    padding-inline-start: 0;
}

The design should be closer to your desired result.

3

Hi thanks i didnt know the flex doesnt apply to the children of children elements. I will look into this