Small question regarding width

Here in my project (, even though, I have kept width of 80% for both input element and select element for screen of max-width: 770px, they are of different width at that screen size. What may be the reason?

@media screen and (max-width: 770px) {
  .input-box {
    width: 80%;
  .drop-down {
    width: 80%;

I think maybe because class ‘dropdown’ is misspelled in your css.


to connect elements from html to css the value of your id needs to be the same
and the usage of . # can also make a diffrence if the two are connected our not

Oh my god! thanks. Strangely, if I may bother you with one thing more : if you use element selector select { } instead of class selector, it doesn’t work.

I’ve no clue about that. Sorry

Edit: seems to be working just fine even with the element selector.