WordPress sidebar is not friendly with css styles

I am making a WordPress template. Why is the sidebar.php file not applying the styles that I prescribe? For example, the name of the widget in the sidebar is displayed through h3.widget-title, if I write in css h3.widget-titleor just .widget-title, nothing changes, styles are not applied.

Css code:

@charset "utf-8";
/* CSS Document */
body{
    background-color:#FFF;
    color:#000;
    font-family:Arial, Helvetica, sans-serif;
    margin:auto;
    padding:0;
    width:960px;
    color:#000
}
.widget-title{text-align:center; font-size:36px; color:#000} 
a{color:#c4c4c4; text-decoration:none;}
a:hover{color:#000; text-decoration:none; text-align: right;}
#logo{ background-image:url(images/blog_logo.png); width: 510px; height: 66px; margin-left:238px; margin-right:238 border:none;}
#menu-header{border-top: 1px solid #c4c4c4; border-bottom: 1px solid #c4c4c4; margin-top:5px; }
ul#items{list-style:none; list-style-type:none; list-style-position: outside; text-align:center; height: 15px; margin: 10px; padding:0}
ul#items li.menu-item a{padding-left:15px; padding-right:15px; font-size:16px; text-decoration:none;}
#page{ width:960px; white-space:normal; height:auto}
#content{width:670px; height:auto; float:left; border-right: 1px solid #c4c4c4; white-space:normal;}
#sidebar{width:275px; float:right; height:auto; padding-left:10px; margin-left:0px; border-left:1px #c4c4c4 solid}
#container{width:660px; float:left; height:27px;} 
.post{width:660px; height:auto; float:left; width:670px; padding-bottom:5px; border-bottom: 1px solid #c4c4c4; margin-bottom:5px;} 
.post h1, #full_post h1 { color:#c4c4c4; font-size:18px; margin:0; width:670px; padding-top:15px; border-bottom: 1px dashed #c4c4c4;}
.post h1:hover, #full_post h1:hover {color:#000;}
.post p, #full_post p{ width:660px; margin:0; padding-top:10px;}
.post .metabar{width:660px; border-top: 1px dashed #c4c4c4; color:#c4c4c4; padding-bottom:5px; padding-top:2px; text-align:center; margin-top:15px;}
.more-link{padding-left:15px}
.page_nav_header{float:left; width:670px; height:auto; padding-bottom:5px; margin-top:5px; border-bottom: 1px solid #c4c4c4}
.page_nav_footer {float:left; width:660px; height:auto; margin-bottom:5px; margin-top:5px}
.left{text-align:right; width:100px; height:auto; float:left;}
.right{text-align:left; width:100px; height:auto; float:right; margin:0; padding:0;}
#footer {width:959px; height:auto; border-top: 1px solid #c4c4c4; clear:both; padding-top:5px; font-size:12px}
.copy{float:right; text-align:right; width:960px}
#full_post{width:670px; float:left; border-top: 1px solid #c4c4c4}
.page_nav_header_fullpost {float:left; width:670px; height:auto; padding-bottom:5px; margin-top:5px}
#full_post #likebar {width:670px; height:auto; border-bottom:1px #c4c4c4 solid; border-top:1px dashed #c4c4c4; padding-bottom:5px; padding-top:2px; padding: 5px 0 5px 0;}
#full_post #metabar{width:670px; border-top: 1px dashed #c4c4c4; color:#c4c4c4; padding-bottom:5px; padding-top:5px; text-align:center; margin-top:15px;}
#full_post #info_rss{width:670px; height:auto; text-align:center;  border-bottom:1px solid #c4c4c4}
#full_post #info_rss::first-letter {font-size:20px; color:#c4c4c4}
#full_post #comments {width:665px; height:auto;}
#full_post #respond {width:670px; height:auto}

Code from sidebar.php file:

<div id="sidebar">
 <?php dynamic_sidebar('Sidebar') ?>
</div>


Answer 1, authority 100%

see which CSS tables are connected to the HTML document sent by the server to the browser, look in these tables for “h3.widget-title” if there is no such selector, then css is not connected, if it is – perhaps this element has more styles assigned that have a higher priority, document inspection will help here, by default it is in opera, chrome.