Responsive NFT preview card component using a mix of grid and flexbox

Is there a proper way to nest elements? What would be considered over-nesting? Why does the <hr> tag affect my classes and my ability to select them via css? For example, in my HTML code I originally specified 5 divs with the class name "item" with an hr tag in between the 4th item and the 5th. That hr tag did not have the class name item at the time. For some reason, I was unable to select my 5th item in css via nth-child(5). I had to select it via nth-child(6) and I was extremely frustrated because I didn't understand why. I eventually did add the item class to that hr tag for various reasons so it "looks" like it works as it should, however to replicate the issue, just remove the item class name from the hr tag. Thank you.