Issues with Divi theme builder in WordPress

Question

Say hello to everyone.

I'm trying to put my CSS code on a form using a Wordpress tool called Divi Builder. But the code I entered was completely different from the code I wrote. I've tried almost everything but nothing works. If you guys can help, I'll put my CSS code here and I'd really appreciate it.

CSS code I made:

._form-content {
  display: flex;
  flex-direction: row;
  gap: 7px;
}
input {
  display: flex;
  width: 252px;
  height: 34px;
  border-radius: 8px;
  fill: #f9f9f9;
  border: 1px solid #b0b0b0;
}
input:focus {
  outline-color: #821313;
}
button {
  width: 286px;
  height: 34px;
  border-radius: 10px;
  background-color: #821313;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  transition: all 0.3 ease;
}
button:hover {
  background-color: #5c0d0d;
}

This is how it should be

This is what it looks like

Here are some errors I encountered

Again, any help would be greatly appreciated.

I tried rewriting the entire CSS code, tried using tags and putting them into the HTML code.

Answer 1

Divi has tons of internal CSS rules, most of which have very specific selectors, are made up of many combinations/nested classes/IDs/tags, and often even contain !importantThis makes it harder to override them. It's likely that your css rules will be overridden by such complex Divi rules.

You have to use browser tools on the elements to see which divi rules apply to them, then create the rules using a selector with higher specificity (google "css specificity" if you don't know what I'm talking about )). If these divi rules contain !important, you have no choice but to use !important in the rule to override the divi rule.