frozzel / first-day-repo

Day one of class work

MIT License

0 stars 0 forks source link

# 🐛 List Items and Boxes Are Not Displaying Correctly #8

Closed frozzel closed 1 year ago

frozzel commented 2 years ago

🐛 List Items and Boxes Are Not Displaying Correctly

Work with a partner to resolve the following issues:

Users should be able to see a horizontal navigation bar with three list items side-by-side.
Users should be able to see three boxes.
Users should be able to see the boxes centered and stacked on top of each other.

Expected Behavior

All three list items in the navigation bar should display inline.
All three boxes should be visible.
Each box should appear centered and on its own line.

Actual Behavior

Each list item in the navigation bar displays on its own line.
Two boxes are visible, and one is not displayed.
The two visible boxes display inline and aligned to the left.

Assets

The following image demonstrates the web application's appearance and functionality:

Three list items are displayed on the right side of the navigation bar, corresponding with three boxes centered on the page.

💡 Hints

Which display value hides an element?

🏆 Bonus

If you have completed this activity, work through the following challenge with your partner to further your knowledge:

What is the CSS visibility property? How is it different from the display property?

Use Google or another search engine to research this.

© 2022 Trilogy Education Services, LLC, a 2U, Inc. brand. Confidential and Proprietary. All Rights Reserved.

frozzel commented 2 years ago

done waiting on class, adjusted display setting in each area of code to align to spec