Bullet points and indentation problem

I’ve managed to fix this issue for blog posts, but not for regular Pages. I can’t seem to apply CSS to Page text without it affecting the navbar.

Here’s a sample page showing what happens with a bulleted list:

https://ssoa.com.au/services/co-working-space/

As you can see, the bullet points are “reverse” indented and I have no idea what is causing this.

I’ve used this code to fix the blog pages:

.blog-entry-single .entry .entry-body ul {
list-style: disc;
margin-left: 20px;
}

And this code will of course fix the pages, but then affects the navbar:

ul {
list-style: disc;
margin-left: 20px;
}

I’ve tried adding this to all the navbar fields which does remove the bullet points from the menu bar:

list-style:none;
list-style-type:none;
list-style-image:none;

But I then end up with the menu bar indented, which I don’t want. Neither:

margin-left: 0px;
or:
margin-left: -20px;

Is there anything else I can try? I have managed to make a style that I can apply directly to lists in the html editor:

.indent-list {
list-style: disc;
margin-left: 20px;
}

but I don’t want to have to do this manually every time and other users won’t manage it.

Would hugely appreciate any help/advice.