Rails: CSS not showing in inspector and not applying - html

Question

I've got a weird error and it happens to me regularly.
I am doing some css for a project, and in the middle of it, some CSS just starts not being taken into account.
All the CSS file works fine, it's just one line or one class that just does not work nor appear at all in the inspector (usually when CSS is not working, the class appears but the code not working is crossed).
I've tried everything.
- Disabling the cache in network
- Emptying my cache
- Removing everything in my CSS file to keep just this one class (to make sure there is not a syntax error somewhere)
- Changing the name of the class to make sure it's not conflicting with anything.
- I've also checked in the source and I do see my line of CSS, so it's properly compiled!
When I check the inspector, there is just ZERO code applied for this class. Like it does not exist.
The weirdest thing is that if I change the name of the class, it's still not working. But if I add another class to another line, it does work.
It's just crashing for a particular line. The only way I can make it work, is by adding the CSS directly inlined in my HTML. But I don't want to do that, that's ugly.
It happened to me a lot of time, with different projects for a while.
Sometimes when I try with the exact same code 2 days later, it works. Sometimes not.
I even took a video to reproduce the whole bug because that's so weird, I can't find the solution. I've showed this error to good coder friends and they don't understand either...
Anyone had this before?
Here is the code, just in case
<div class="text-step">
<%= image_tag "pay_icon.png" , height: 40 %>
<h3>Pay by card</h3>
<p>Pay in less than 1 minute</p>
</div>
.text-step {
width: 45vw;
}
And here is what shows in the inspector:
element.style {
}
*, *::before, *::after {
box-sizing: border-box;
}
user agent stylesheet
div {
display: block;
}
Nothing for "text-step"...
EDIT: The CSS is inside a separate CSS file. With 100 lines of CSS in it. Everything works perfectly, except the line I copied.
That's why I was saying that I've tried to remove everything inside this file just to keep the one I copied (to check there is no syntax errors).
Sorry for the confusion I should have been clearer.
SOLVED: Hey. So, I've solved this mystery. That's actually a bit crazy. The space between my classname and my bracket was a non-breaking space. It happens on mac when you press space + alt at the same time. I probably do this without realising it sometimes... Found the solution somewhere online, but it was almost impossible to debug without knowing it as you can't tell the difference with the eye!
Thanks a lot

Answer 1

I'm giving an answer here based on the info you've provided, will edit if more info is given.
If you're using the code like you pasted it, then it doesn't work because it's invalid HTML. In order to have it render correctly it needs to be:
<style type="text/css">
.text-step {
width: 45vw;
color: red;
}
</style>
<div class="text-step">
<!-- commenting the below since it's not HTML -->
<!-- <%= image_tag "pay_icon.png" , height: 40 %> -->
<h3>Pay by card</h3>
<p>Pay in less than 1 minute</p>
</div>
Something every dev learns is that the machine is never wrong. If you think the browser is playing tricks on you, it isn't. Browsers are battle-tested, especially for simple tasks such as parsing HTML and CSS, the problem will be with your code.
to make sure there is not a syntax error somewhere
When you want to test this sort of weird behavior, the best way to do it is to run an "independent" test. Open up something like jsBin or Codepen and add the code that is giving you trouble. That way you can test the code itself without and discard other possible issues (your compiler, the site you're using, your caching system, God knows what else).

Answer 2

Try to use like this way :
<style>
.text-step {
width: 45vw;
}
</style>
<div class="text-step">
<img src="pay_icon.png" style="height: 40%">
<h3>Pay by card</h3>
<p>Pay in less than 1 minute</p>
</div>

Answer 3

SOLVED: Hey. So, I've solved this mystery. That's actually a bit crazy. The space between my classname and my bracket was a non-breaking space. It happens on mac when you press space + alt at the same time. I probably do this without realising it sometimes... Found the solution somewhere online, but it was almost impossible to debug without knowing it as you can't tell the difference with the eye!

Answer 4

You can use this code
body {
margin: 0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
div {
display: block;
margin: 0 auto;
}
.text-step {
width: 45vw;
background-color: #dddddd;
padding: 15px;
}
<div>
<div class="text-step">
<%= image_tag "pay_icon.png", height: 40 %>
<h3>Pay by card</h3>
<p>Pay in less than 1 minute</p>
</div>
</div>