For some reason, when I added the "br" class, it removed the background color from the form. Why?

The problem is how the class is being selected in CSS. Consider this code:

.form-contact { /* styling… */ }
.br { /* other styling… */ }

This applies styling to elements with the class form-contact and other styling to elements with the class br.

In HTML, we can apply multiple classes to the same element using a space between class names, like so:

<form class="form-contact br">

This assigns to the form element the form-contact class and the br class. The form element is considered to have both classes applied separately.

Now consider this alternate method of selecting a class in CSS:

[class="form-contact"] { /* styling… */ }
[class="br"] { /* other styling… */ }
[class="form-contact br"] { /* more styling… */ }

The difference between this selector and the one at the top of this answer is that whereas the prior example will apply styling to elements that have the specified class names assigned, the latter will only work in cases where the value of the class attribute in HTML exactly matches the value of the class attribute specified in CSS.

In this case, the code isn't selecting a class, it's selecting an exact match for the value of the class attribute. Because the strings "form-contact" and "form-contact br" are not the same, the selector will not work as intended. In other words, even though the form element has two distinct classes applied, using an attribute selector for the class attribute selects based on an exact text match and can't distinguish two separate classes, form-contact and br.

The latter example will work as follows:

[class="form-contact"] { /* selects elements with only the class, "form-contact" */ }
[class="br"] { /* selects elements with only the class, "br" */ }
[class="form-contact br"] { /* selects elements with the classes, "form-contact" AND "br", separated by a single space */ }

if you use attribute selector you have to type the below rule:

form[class~="form-contact"] { 
padding: 20px 24px; background: #f4f7f8; 
}

[attr~=value] Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".

Still a tad unclear. As the the first OP posted, I thought the 'form' was just the element, and wouldn't conflict with addition of the new .br class? I too seem to have sprung a leak with the same issue.....struggling to resolve it.

Gotcha. Cheers Philip, much appreciated.

Was having the same issue and thought I should chime in. It's worth noting that it was never explained in the videos that the:

form[class="form-contact"] { padding: 20px 24px; background: #f4f7f8; }

was changed over to:

.form-contact { /* some styling…*/ }

When you launch the workspace, or still have it open from the previous lessons, the first line of code is what is there. I didn't notice it changed until I read this thread and re-checked the video.