You can use @media, but you need to add that back in every time you export the RLM framework. RLM will overwrite everything that has been changed outside the programme.
The colours seem ok to me, but I agree that you'd better use a different colour as the logo background to increase the contrast.
When I wrote this:
...pop the logo in a div with a % width and a max-width in px, and make the image fill it 100%.
I was thinking of a container div with a max-width, like e.g.
<div class="borderlogo"></div> inside which you position the actual logo image.
The css would be something like this:
.borderlogo {width: 25%; max-width: 500px; (plus the other css rules you want) }
where those 25% is the part of the whole available width,
and then
.borderlogo img {width: 100%;}
You can of course use a different %age, 25% is just an example.