/*logo center - not working*/
#site-logo, #site-branding {
    text-align: center;
    width: 50%;
}

Inline css should not be added in our theme as this is not a standard way to add css in WordPress. For adding css that will be applicable for mobile version, we should create new css file and add media queries in that. You can also add below code in style.css file but it’s good to create new file for adding media queries.

So your final code will go like :

@media only screen and (min-width : 320px) and (max-width : 480px) {
	#site-logo,
	#site-branding {
		width: 100%;
	}
}

above css will be applicable when mobile / screen resolution is between 320px and 480px.