New CSS class won't apply during development

Question

I am developing a static website in a local environment with gulp, sass, atom as my text editor and an up-to-date Chrome.

For some reason, sometimes when I create a new class, my browser will constantly refuse to recognise it.

Most recent example:

.projects {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: 10px solid red;
    width: 1000px;
    height: 1000px;
}

.project {
    width: 400px;
    height: 200px;
    border: 1px solid white;
}

You can see it in the markup, right there:

If I check my page sources, it's there:

The child element, .project, is getting its CSS just fine:

But the .projects element absolutely refuses to apply its styling:

I have tried:

1. Restarting gulp
2. Restarting Chrome
3. Renaming the class (still doesn't work)
4. Applying a different class just to check (applies the styling with no problem)
5. Using it on a different page, same CSS files access (no luck)
6. Mainly, everything works just as expected, but that element in particular will not get any new styles regardless of what I do.

Full disclaimer

I've been working in this field for years and this just doesn't make sense. I believe the fault might be related to some kind of caching, live reloading with BrowserSync or something like that.

Attached is my gulpfile.js as well, if it sheds any light:

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const plumber = require('gulp-plumber');
const browserSync = require('browser-sync').create();

gulp.task('sass', function(){
  return gulp.src('app/sass/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.stream())
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './app'
    },
  })
})


gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/sass/*.scss', ['sass']);
  // Reloads the browser whenever HTML or JS files change
  gulp.watch('app/**/*.html', browserSync.reload);
  gulp.watch('app/about-us/index.html', browserSync.reload);
  gulp.watch('app/js/*.js', browserSync.reload);
  gulp.watch('app/css/*.css', browserSync.reload);
});