All right, well, spoiler alert, we're going to look at the solutions. So if you haven't had a chance to tinker with this stuff a bit, I would give it a shot, go in here, move some stuff around, try to do some debugging. That said, I'm going to go ahead and go through the solutions. So first we have this overhang thing here, and then we've got a catalog part here that clearly doesn't look like the others, so I'll do this one first. First I'm going to ask, what is this element over here that seems to be a bit bigger than the other ones? I use our handy inspect feature and I poke around in here a bit because it didn't really land on the place I kind of wanted. But there it is, it looks like it's generally in this top part div area, and there is a div with the ID search-box in here, and I think that's our element. It's got this big margin, rightly or wrongly, to put it in a certain place, no border, but quite a lot of padding, 10 pixels. So maybe, let's just try changing that and see if that gets us what we want. So we'll look at these padding things, we see that it's getting 10 pixels of padding from the CSS entry for the ID search-box. Let's just pop in, if we follow this little arrow, it'll take us over from here to here, to the Styles area. And here we can actually go in and just quickly fiddle with the local copy. Let's say we make the padding 5 pixels, yeah, that's looks pretty good. We could've gone and made this stuff over here a bit bigger. And that is actually pretty common in these kinds of UI bugs, or visual bugs, if you will. And so it is useful if you have a style guide that you can fall back on. Because if you end up making a lot of these little fixes inconsistently, you can end up with parts of the site that don't have the same kind of visual continuity that you might want. So now I've just fixed this in the local copy. If I want to fix it on the actual code, I need to go in here and I need to search for this ID search-box, because that is the applicable CSS entry. So there's one, and then there's an ID for it down here. So if I change this padding to 5 pixels, and I do I do a save, Yep, save it, and I go in here, I see that this is all set, this is fine now. Okay, and so if I go in and I look at this box here, I'm going to do the same thing. I'm going to say, what is this element, and I see it's this div class overlay. And in fact, that's the interior, we know kind of from being a little familiar with this HTML that that's this thing over here. And you can see that it's nested inside this div that's called catalog-part. You can see that it's nested because this chevron is down, and this thing's inside of it. And then okay, so what we're really looking at is this catalog-part, highlights all funny. And we see over here, there's just no styles really being applied at all. So we think it should be getting the class catalog-part CSS, just like all these other ones over here. This is the, let's see, I think it's just right around here, so there's this catalog-part entry that all these are getting, but this one isn't. So somehow the HTML and the CSS are not connecting. The CSS is not getting associated with the HTML. If we look a little closer, it looks like there's a typo here. And if we remove this a in our local copy, boom, that fixes things up. Again, I just need to, it's easy to search for a part misspelled, because fortunately, it's only misspelled in one place. I go in here, I fix it, I do a save, and then that's the final save, and so problem solved. And so those those are some examples of how you can work through and fix HTML bugs. And what I think is useful is to know how to go to all the way through and fix them, and it's pretty easy and just fiddle. But also how to just identify these things, and put the fix in to one of your collaborators if you don't happen to have access to all the CSS and all the assets. Okay, so, good luck with your future debugging. I hope these things have started to make you more curious about how to look at your HTML and CSS development in a more analytical, stepwise kind of fashion.
