CSS CSS Layout Box Model Concepts Viewport Units

Larissa Ragland
Larissa Ragland
6,053 Points

Challenge task 2 of 2 having problems

asking for me to select the section element with the class .intro and set width value to 75%k of the over all viewport width.

height:  25vh;  

*intro  {
  width:  7vw;

/* Complete the challenge by writing CSS below */
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Developer Diane's blog</title>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
    Developer Diane’s Blog
    <section class="intro">
      <h1>The verdict is in. CSS Layout is great!</h1>
      <p>I’ve been working with CSS for a while now, and I have to say, it’s pretty awesome. I love being able to separate content from presentation, and to keep all my styles in an external stylesheet.</p>
      <p>I’ve had a pretty good grasp on the basics for a while now, but I needed to learn more about how to control layout with my CSS. Understanding CSS layout meant first exploring the parts of the CSS box model.</p>
    <section class="featured">
      <h2>The CSS Box Model</h2>
      <p>There are lots of great resources online to help you learn the CSS Box Model. I like the CSS Tricks article <a href="https://css-tricks.com/the-css-box-model/" target="_blank">The CSS Box Model</a> by Chris Coyier. To quote the author:</p>
      <blockquote>At the risk of over-repeating myself: <strong>every element in web design is a rectangular box.</strong></blockquote>
      <p>That’s right! Every HTML element is considered by the browser to be a rectangular box.</p>
      <p>The CSS Box Model consists of four properties: content, padding, border, and margin. I've included a graphic from Coyier’s article to illustrate this principle.</p>
      <p class="clear">It’s pretty easy to understand the Content portion of the box model. The content is whatever your HTML consists of. It could be a paragraph full of text, or a bulleted list, or an image.</p>
      <p>Beginning developers may have some trouble keeping the other parts of the box model straight, so let’s examine them one by one.</p>
    <footer>©2020 Developer Diane.</footer>

2 Answers

Larissa Ragland
Larissa Ragland
6,053 Points

need some help figuring out what i am doing wrong

Teresa Hawkins
Teresa Hawkins
8,065 Points

Use a . instead of * in front of intro. Look carefully at the vw value again and divide it again . 75 percent does not equal 7vw. The rest of code works if you if fix that it will work.