Page not responding to CSS

Backlight 3 Customization
#1

On the CONTACT page of my site, I placed a logo in the center, below the introductory text. Somehow, it has become misaligned.
So, I went to the inspector and found that the element was:
img src="/backlight/custom/images/petitboutoncouleur.jpg" style="top; 10px;margin-left: 530px;" width="71"
also in the styles section:
element { margin-left: 530px; }
In my own CSS file, I changed it to this:
/* logo */
element.style {
margin: auto;
}
This would align the logo centred.
But even after clearing all caches, still no change.
What am I missing?

https://pideja.ca/contact/

UPDATE
I found that by altering the HTML in the PAGE setting/Page copy/Main copy, I had to change this line:

    <img src="/backlight/custom/images/petitboutoncouleur.jpg" width="71" style="top; 10px;margin: auto;">

(edited by moderator so code would appear)

Looks good now.

#2

I don’t think you can use element.style in your custom css
You need to find the actual selector. Element means that the css is added inline the html already.

Also, the logo above the contact form looks centered to me. Try clearing cache if it’s not aligning correctly.

Also, the css in your /* logo */ section is misformed:

/* logo */
element.style {
    margin: auto;
.the__copy > div:nth-child(1) > img:nth-child(3) {
  margin: auto;
}

And it’s messing with the Menu button. Remove the element.style “rule”

Also, the html for the image you’re including has some erros in the styles you’re trying to add:

<img src="/backlight/custom/images/petitboutoncouleur.jpg" width="71" style="top; 10px;margin: auto;">

in the style attribute, you have a semi-colon after top. You need a colon. And I don’t think it’s doing anything anyway; I think you also need to set the position property
https://www.w3schools.com/cssref/pr_pos_top.asp

#3

To center align the image, you can also used the class “aligncenter”

your code still has top; 10px;
You should remove it or change it to top: 10px;, which, as mentioned, probably isn’t doing anything anyway.

#4

I noticed that the red background on that button is gone…
So, as per your suggestion, I commented out the “element.style” rule. Logo is still centred. Ok.
The code for the image has been adjusted to: style=" top: 05px; margin: auto;"the top margin actually does position the logo a little higher on the page.
But, whatever I did to lose the red background on the “menu” button still eludes me.

#5

I mentioned that above. it’s the code you’ve got in the /* logo */ section of your css starting on line 143.
remove this:
.element.style {
margin: auto;
It’s invalidating the css that controls that menu button (actually, it invalidates everything following that error)

#6

I guess commenting that code was not enough. I deleted it and as predicted, the red background is back.