When the browser builds your webpage, it treats every HTML element as a box. An image box is put next to a text box, which is next to a link box. CSS calls this the "box model".
You can modify the "box model" with the CSS properties width, height, margin, padding and border. Search on Google to learn how these properties work, then complete the steps below.
- Find the
.numberrule instyles.css. Play around with the CSS properties in this rule to see how they work. - Right now, each message has a large space to its right. Use one of the box model properties you have learned to modify the unread message so that it is positioned on the right, as shown in this screenshot:
.
Try this: Add * { border: 1px solid red; } to your CSS code. It will show you the box model of every element.