tristianchase
tristianchase

Reputation: 9

Trouble Centering

I'm developing my webpage and I followed this tutorial "https://www.youtube.com/watch?v=1tdRozm__K0". The only thing I am trying to change is centering the text. And I've haven't been able to get it right. It's been close, but my OCD just won't allow it. Help is greatly appreciated.

Thanks

body {
	width: 100%;
	margin: auto;
	font-family: Helvetica;
}

.header {
	background: #383838;
	width: 100%;
	top: 0;
	position: fixed;
}

.container {
	width: 960px;
	margin: 0 auto;
}

.logo {
	float: center;
	font-size: 15;
	color: white;
}
<DOCTYPE html>
<html>
	<head>
		<title>Website</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	
	<body>
		<!-- IGNORE THIS! THIS IS FOR LiveReload -->
		<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
		<!-- IGNORE THIS! THIS IS FOR LiveReload -->
		
		<div class="header">
			
			<div class="container">
				
				<div class="logo">
					<h1>WEBSITE</h1>
				</div>
			
			</div>
		
		</div>
	</body>
</html>

Upvotes: 1

Views: 42

Answers (1)

ketan
ketan

Reputation: 19341

You have fixed width of container, Just remove it and give text-align:center to .logo.

Check it out:

body {
	width: 100%;
	margin: auto;
	font-family: Helvetica;
}

.header {
	background: #383838;
	width: 100%;
	top: 0;
	position: fixed;
}

.container {
	margin: 0 auto;
}

.logo {
	float: center;
	font-size: 15;
	color: white;
    text-align:center;  // Here align center make text center.
}
<DOCTYPE html>
<html>
	<head>
		<title>Website</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	
	<body>
		<!-- IGNORE THIS! THIS IS FOR LiveReload -->
		
		<!-- IGNORE THIS! THIS IS FOR LiveReload -->
		
		<div class="header">
			
			<div class="container">
				
				<div class="logo">
					<h1>WEBSITE</h1>
				</div>
			
			</div>
		
		</div>
	</body>
</html>

Upvotes: 1

Related Questions