Cant'n solve Responsive Web Design Step 41

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cafe Menu</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article class="item">
          <p class="flavor">French Vanilla</p>
          <p class="price">3.00</p>
        </article>
        <article>
          <p>Caramel Macchiato</p>
          <p>3.75</p>
        </article>
        <article>
          <p>Pumpkin Spice</p>
          <p>3.50</p>
        </article>
        <article>
          <p>Hazelnut</p>
          <p>4.00</p>
        </article>
        <article>
          <p>Mocha</p>
          <p>4.50</p>
        </article>
      </section>
    </main>
  </div>
</body>
<html>

/* file: styles.css */
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
text-align: center;
}

.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}

.item p {
display: inline-block;
}

.flavor {
text-align: right;
width: 49%;
}

.price {
text-align: left;
width: 49%;
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Mobile Safari/537.36

Challenge: Step 41

Link to the challenge:

2

These two p elements should be on the same line.

1 Like
3

yes, i know i do this

.item p {
display: inline-block;
}

.flavor {
text-align: right;
width: 49%;
}

.price {
text-align: left;
width: 50.08%;
}

moving the price p element to be on the same line and make sure there is no space between them (width: 50.08%:wink:

4

The task is asking you to place these elements on the same line in the source code. View will stay unchanged. Sound a bit confusing, yes.

1 Like
5

Si, de hecho ya con width 49% ambos están en la misma línea, pero ahora pide que mueva el párrafo “precio” para que no haya un espacio extra al final. He probado muchos width pero el test no pasa.

6

thank you, it works now

1 Like
7

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