Не применяются CSS селекторы к элементам


#1

Доброго времени суток! Столкнулся с такой проблемой, что браузеры не видят селектор “small-line” для div. Видимо я запутался с наследованием или вложенностью тегов или еще чего подобное. Стили всех остальных элементов применяются как надо, но если добавлять еще элементы и новые селекторы для них, то они игнорируются. Второй день не могу разобраться, что я делаю не так.

HTML

<body>
	
	<header>
	
		<section class="header">
		
			<div class="top-header">
				<span class="logo-text">MoGo</span>
				<nav>
					<ul class="main-menu">
						<li>about</li>
						<li>service</li>
						<li>work</li>
						<li>blog</li>
						<li>contact</li>
					</ul>
				</nav>
				<div class="central-text">
					<span class="slogan-big">Creative Template</span> <br/>
					<span class="welcome-big">welcome to mogo</span>
				</div>
				<div class="small-line>"><span>TEST TEST TEST</span></div>
			</div>
			
		</section>
			
	
		</header>

</body>

CSS

   .header {
    	background-image: url(../images/eagle.jpg);
    }

    .top-header {
    	padding: 5px;
    	color: white;
    	width: 100%;
    	display: inline;
    	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
    }

    .logo-text {
    	font-size: 24px;
    	padding: 25px;
    	float: left;
    }

    .main-menu {
    	margin-left: 900px;
    }
    .main-menu li{
    	display: inline;
    	list-style-type: none;
    	color: white;
    	padding: 25px;
    	margin: 0px;
    	font-size: 14px;
    	text-transform: uppercase;
    		font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"
    }

    .central-text {
    	width: 800px;
    	margin-top: 150px;
    	margin-left: auto;
    	margin-right: auto;
    	text-align: center;
    }

    .slogan-big {
    	font-size: 72px;
    	
    }

    .welcome-big {
    	font-size: 150px;
    	text-transform: uppercase;
    }

    .small-line {
    	margin-left: auto;
    	margin-right: auto;
    	border: solid 2px black;
    	text-align: center;
    }

#2

у вас в название класса вкрался знак >


#3

Огромное спасибо! Вот он эффект свежего взгляда :smile: