Could Someone Help Take a Look What is Wrong with This Code

I am a newbie. I like the theme twenty fifteen but not like some of its features such as an annoying category title with big white space between category and the post title. One day I found the below link and pasted the member glenlipka’s code on my CSS editor, it looks very pretty on my desktop, however when I checked my website on the cell phone, something weird happened.

When I read posts of my website under category, for example, blog, the screen just keeps changing the size, sometimes it just gets stuck as a very small page size that I believe no such mobile has such small screen size, obviously, it is not right. I know the author said it is responsive for different size of phone sizes, however, can someone helps to find a better solution, so it will just fit the right screen size? Thanks. I tried myself to change some numbers but never get it done. ??

Below is the link of the post and code that I pasted on my CSS editor. Thanks.

——————————–
https://www.ads-software.com/support/topic/reducing-width-of-sidebar-of-twenty-fiteen-theme?replies=21

———————————–

.hentry, .page-header, .page-content {
box-shadow: 4px 10px 15px rgba(0,0,0,0.8);
border-radius: 15px;
}

.site-header { margin: 0;}
.widget { margin: 10% 0;}
.page-header { border-left: 0;}

.hentry+.hentry, .page-header+.hentry, .page-header+.page-content { margin-top: 5%;}

select,input { font-family: raleway;}
body:before { max-width: 413px;}
#sidebar { left: 0;}
#page { margin-left: 0;}
@media screen and (min-width: 59em) {
#masthead {
margin-top: 10%;
}
}

@media screen and (max-width: 59em) {
#masthead {
padding: 3%;
}
}

.widget_pages h2 { display: none;}