всмысле какая? их вообще сравнивать нельзя. это атрибуты у разных элементов, более того - обязательные атрибуты. как скажем <а> нельзя использовать без href (да. это получится у тебя сделать, но это будет не валидно), также как и img без src. ну а bg картинку как ты еще задавать собираешься без url и т.д.
ну раз тока начинаешь учиться тогда прочти https://ru.bem.info/ и сразу начинай называть классы так. тогда точно с бутсрапом не пересечешься в плане классов
все нормально работает. у тебя скорее всего либо кэш. либо установленные в ОС шрифты - все одной ширины. в общем удали все Roboto шрифты из компа, чтобы он грузил из гугла, а не из компа. и почисти кэш
именно border - никак. но такой эффект делается через absolute элемент, который находится под элементом. и задается ему width: 0; а потом через transition дается ему width: 100%; - тогда ты получишь такой эффект
1) даешь кнопке absolute и выравниваешь
2) делаешь кнопку и инпут inline-block(не забыть убрать пробелы) и выравниваешь их задавая фикс width для кнопки и calc(100% - widthКнопки); для инпута
обьект который появляется должен находится внутри той области на которой ты делаешь hover, чтобы при наведении на появленный обьект - ты не уходил из области hover codepen.io/anon/pen/RGmvjG