As usual, looking for answers for other issues I came across a reference to using custom CSS in this way in the knowledge base.
To help anyone in the future though, shown below was what I needed, basically just more curly brackets!
@media (min-width: 1200px) {
.sidebar {
width: 20%;
}
}
@media (min-width: 1200px) {
.one-sidebar #content {
width: 80%;
}
}
Credit to :
https://kb.x-cart.com/look_and_feel/basic_skin_changes/changing_logo_size_for_crisp_white_skin.html