WordPress Customizer Additional CSS - line numbers overlaps CSS code

Question

On one of my sites the Additional CSS in customizer is difficult to work with because the left margins are hiding the left side of the CSS code window behind the line numbers. I tried adding some styles for the admin in functions.php (I already use a couple of other styles), but they don't have any effect on this.

Here is the code I am using (I tried a few things):

add_action('admin_head', 'my_admin_styles');
function my_admin_styles() {
echo '<style>
#adminmenu div.separator {
 height: 2px;
 padding: 0;
 width:90%; margin-right:auto; margin-left:auto;
 border-top: 1px solid #CCC; }
#recipe_notes-tmce {display:none; }
.rwmb-input input {width:100%; }
.CodeMirror-sizer { margin-left: 50px !important; }
.CodeMirror-line  {padding-left:20px !important; }    
</style>';
}

The last two are what I am using to fix the overlap, but they don't show up when I inspect code - the others ones work as expected and show up in inspect code.

Any advice? Do you think it might be a conflict?

Thanks!

Answer 1

Instead of doing it that way I found a code snippet to add a new css file. Here is the new code:

function add_my_customizer_styles() {
wp_enqueue_style( 'my-customizer-css', trailingslashit( get_stylesheet_directory_uri() ).'assets/styles/customizer.css', null );
}
add_action( 'customize_controls_print_styles', 'add_my_customizer_styles', 99 );

That is working fine. Evidently, while the previous code works for some areas of the admin it didn't work for the Customizer. This way I was able to make the customizer wider, too, which I've always wanted to do, by adding this additional CSS:

.wp-full-overlay-sidebar { width: 400px; }
.wp-full-overlay.expanded {margin-left: 400px; } 

Problem solved!