Fylo Data Storage - HTML & CSS

1. I researched a lot of options on how to customise the <input> I added for the data storage bar, however everything I attempted to add either didn't change anything at all, or changed the scrollbar down the right hand side of the page (tried using ::-webkit-scrollbar which I don't think worked the way I expected). What is the best way to create a fully functional bar like on this challenge, with the colour gradient too?

2. The arrow that comes off of the speech bubble - I have used a <div> to create a triangle to place beside it, however what is the correct way to do this as I can only assume with how many issues I encountered creating this, that it isn't the best way at all?

3. I wasn't able to centre the "185" in the white bubble - I put a margin top but it doesn't seem to modify it at all, however the margin left does. Any insight as to what I'm doing wrong here would be great!

4. I was going to change some of my px to % for my container positions, however I wanted to find out which way is the best/preferred in development? I don't know if I should've done this to help with responsiveness (if I had remembered to make it responsive that is), or not.

5. I forgot to make the site responsive so it won't be adapted to mobile - I'd be interested to receive any recommendations on how to learn about responsive layouts as I'm very new to coding and this is the first time I've come across it in my journey.

Any good and bad feedback welcomed so I can learn and improve!

Thanks in advance, Laura.