Child theme won't load css file

Hello,

I’ve been trying to work this out all weekend. So keen to solve this mystery! Why is the css file in my Child folder ignored?

My site: https://www.12field.com.au

I have a Child theme folder (twelvefield) next to a Parent theme folder (ronika) in wp-content/themes.

In the Child theme folder I have a .css file. In that .css I have:

/*
Theme Name: twelvefield
Description: Child theme for the Ronika theme
Template: ronika
Version: 1.0
*/

@import url("../ronika/style.css");

.main-navigation > ul > li a {
	font-family: 'Times New Roman', Times, serif;
}

The main navigation DOES NOT change to Times New Roman. I have tried other css changes, like adding new colors etc, but no changes made in the child css file appear on my site.

I have activated my child theme in the Dashboard. It appears with a name and the thumbnail I made for it. There is no error message.

Is there something in the Ronika theme that’s calling the parent css and ignoring my css file?

I’ve read that changing ‘get_template_directory’ to ‘get_stylesheet_directory’ in the php can help when using Child themes, but I don’t know how or where to put it. Ronika has ‘get_template_directory’ appear several times in it’s functions.php file.

Thanks!