Debugging Styles Challenge

With Chrome DevTools, debugging CSS doesn't always have to be tricky and 0:00 frustrating. 0:04 Becoming a skilled CSS debugger takes practice. 0:04 And just like learning to code, the more you practice the faster and 0:07 more efficient you'll be at finding and fixing bugs. 0:10 So now you're ready to debug CSS issues on your own using DevTools. 0:13 Be sure to launch the work space for this video to get the latest files for 0:17 this exercise. 0:21 So this is the same RSVP App we looked at earlier, 0:22 except that I removed the JavaScript. 0:25 And just for this exercise, I manually added four names to the guest list. 0:27 Now when you preview the workspace, you'll see a page with several problems. 0:32 So let's go over the issues you'll need to debug. 0:36 The first thing you'll notice is that the header has no background, and 0:39 the space between the RSVP heading and the top of the header is no longer present. 0:43 The heading up here is a little too close to the top edge of the app, 0:48 it should look like this. 0:52 The form submit button is also not displaying the correct height and 0:54 background color, so it looks a lot shorter than it should be. 0:58 And there's a little extra space between the right edge of the form and the button, 1:02 it should look like this. 1:06 Finally there are a couple of issues with our lists of guests. 1:09 First the list items are being displayed on separate lines when they should 1:13 be displayed side by side when the view port is 769 pixels or wider. 1:19 And the items up here too narrow in all view port sizes. 1:23 For example, 1:27 they should each take up an entire line here in the narrowest breakpoint. 1:28 And display as four equal size items side by side in wider breakpoints, like this. 1:32 Second, notice all the white space on the left side of the guest list at wider 1:41 breakpoints. 1:46 And at this medium breakpoint, the label and 1:47 check box are even dropping down to the bottom of the container. 1:49 I'll give you a hint for this on, check the float properties. 1:53 So this exercise is a great way to practice what you've learned about 1:57 debugging CSS. 2:00 In the next video, I'll show you my solution. 2:01 Good luck and have fun. 2:03