Reputation: 9
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
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