HTML, CSS, Bootstrap

Hey Ali,

It's the display: inline-block; declaration on the #third selector that's causing the gap. If you remove it, you'll see the gap closes, but it also causes some other layout issues because you're using float. I'd recommend staying away from the float property for layout and instead focus on Flexbox and Grid. They're much better suited to laying out elements.

While looking at your code, I noticed some other areas I'd recommend reviewing:

• Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
• Similar to IDs, avoid using inline-styles. All your styles should be in your CSS file. Inline-styles are extremely specific and aren't reusable.
• Also, stay away from the !important flag as much as possible. If you find yourself needing to use it, it's often a sign that the way you're selecting elements to be styled needs to be improved.
• I'd recommend trying to clear the errors in the accessibility and HTML validation reports. If you're not sure what to do, try Googling the error message. Once you think you've resolved the issue, you can generate a new report to see if it clears the issue.

I hope these tips help. Let me know if you have any questions! 🙂