Some comments on your CSS:
It is generally better to use class selectors over id selectors as classes have a much lower specificity and is reusable. So instead of #billamount you should use .billamount. classes can still be single use.
About your naming of classes:
The common CSS naming structure is use hyphens to separate words for readability:
.billamount becomes .bill-amount, #numberofpeople becomes .number-of-people, etc.
"Magic numbers":
I noticed that you've used a lot of exact pixel sizes for things, instead of relative sizes, such as ems or rems. Most of the time it is better to not use an exact number and instead use relative sizes.
Sources:
- https://css-tricks.com/magic-numbers-in-css/
- https://csswizardry.com/2012/11/code-smells-in-css/#magic-numbers
You also have a lot of repetition where different classes have the same content. Example:
*#billamount {
background-image: url("../images/icon-dollar.svg");
background-repeat: no-repeat;
background-position: center;
background-position-x: 20px;
}
#numberofpeople {
background-image: url("../images/icon-person.svg");
background-repeat: no-repeat;
background-position: center;
background-position-x: 20px;
}*
The only difference here is the background image URL. It would be better to use one common class for both and then one specific one for each where you add the background image. Example:
*.icon-button {
background-repeat: no-repeat;
background-position: center;
background-position-x: 20px;
}
.icon-button--dollar {
background-image: url("../images/icon-dollar.svg");
}
.icon-button--people {
background-image: url("../images/icon-person.svg");
}*
while you don't gain anything in terms of code length, you do gain maintainability. This way if you need to update something on .icon-button you only update it once instead of multiple times, which leads to lower chance of errors/typos.
DON'T USE !important
!important ruins specificity and leads to a lot of problems in itself. Most of the time you can fix the issue with a refactor.