Yeah, at first glance it doesn’t seem all that helpful, but what I find helpful about it is the fact that it will show you all of the properties associated with each element on the page.
Would you mind if I walked you through the process I used for trouble-shooting? I’m certainly not an expert, but it’s worked for me so far! (By the way, your portfolio link gives me a 404 error when I try to click on it at the moment, so I’m just going based off memory)
Using your thumbnails as an example, when I selected one, the first thing I looked at was how, and with what colors, the Inspector shaded the element. Blue is the element itself, green is the element’s padding, yellow(ish) is the element’s border, and orange is the element’s margin. The thumbnail had a little bit of padding and margin around it, but not enough to make it stick to the right like it was, so you can rule out the thumbnail’s padding and margin as the culprit.
Next I looked at the thumbnail’s parent element - the container it was in. Again, not much padding and margin on that, so that wasn’t the issue. But I did notice that the parent element was much wider than the thumbnail, and that the thumbnail was actually hugging the right side of the container. That told me that there was some property attached thumbnail itself that was making it do that.
So I selected the thumbnail again, started scrolling through all of the CSS attached to it, and found “img {float: right;}”. To the left of each CSS property is a little check-box where you can turn properties off and on. I turned off the float: right property, and bingo! The thumbnails shifted back to the left. You have found your culprit, and are one step closer to fixing it.
Sorry for the long response, but I hope this helpful!
