It was centered before.
No idea what I changed.
How can I fix this? So the styles apply?
It’s like my .index-links div h3 { font-family: Arial; font-size: 28px; color: #111; font-weight: bold; line-height: 40px; text-align: center; line-height: 100px; }
isn’t applying. I tried removing it and putting it back it and nope.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Victor K. Portoflio Page</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a class="header-cases" href="#">Cases</a>
</nav>
</header>
<main>
<section class="index-banner">
<div class="vertical-center">
<h2>I AM A FREELANCE WEB DEVELOPER</h2>
<h1>Hello ello ello ello ello ello ello ello ello
ello ello ello ello ello ello ello ello ello ello
</h1>
</div>
</section>
<div class="wrapper"
<section class="index-links">
<a href="cases.html">
<div class="index-boxlink-square">
<h3>PROJECTS</h3>
</div>
</a>
<a href="#">
<div class="index-boxlink-rectangle">
<h3>CONTACT</h3>
</div>
</a>
<a href="#">
<div class="index-boxlink-square">
<h3>PORTFOLIO</h3>
</div>
</a>
<a href="#">
<div class="index-boxlink-rectangle">
<h3>ABOUT</h3>
</div>
</a>
<a href="#">
<div class="index-boxlink-square">
<h3>CONTACT</h3>
</div>
</a>
<a href="#">
<div class="index-boxlink-square">
<h3>CONTACT</h3>
</div>
</a>
</section>
</main>
<footer>
<div class="wrapper">
<ul class="footer-links-main">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Projects</a></li>
</ul>
<ul class="footer-links-cases">
<li><a href="#">Go Back To Top</a></li>
<li><a href="#">random text</a></li>
<li><a href="#">random text</a></li>
<li><a href="#">random text</a></li>
<li><a href="#">random text</a></li>
<li><a href="#">random text</a></li>
</ul>
<div class="footer-sm">
<a href="#">
<img src="fb.ico" alt="facebook image">
</a>
<a href="#">
<img src="twit.jpg" alt="twitter image">
</a>
<a href="$">
<img src="insta.jpg" alt="instagram image">
</a>
</div>
</footer>
</div>
</div>
</body>
</html>
* {
text-decoration: none;
}
body {
}
header {
background-color: #fff;
width: 100%;
height: 100px;
}
@media only screen and (min-width: 1000px) {
header .header-brand {
margin: 31px 0;
text-align: left;
padding: 0 20px 0 40px;
}
header nav ul {
float: left;
margin: 20px 0;
}
header nav ul li {
display: inline-block;
float: left;
list-style: none;
padding: 0 16px;
}
header nav ul li a {
font-family: Arial;
font-size: 17px;
font-weight: bold;
color: #111;
line-height: 60px;
}
}
header .header-brand {
font-family: Arial;
font-size: 25px;
font-weight: bold;
color: #111;
text-transform: uppercase;
display: block;
margin: 0 auto;
text-align: center;
padding: 20px 0;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
}
header nav ul li {
display: inline-block;
float: left;
list-style: none;
padding: 0 16px;
}
header nav ul li a {
font-family: Arial;
font-size: 17px;
font-weight: bold;
color: #111;
}
header .header-cases {
display: none;
}
.index-banner {
width: 100%;
height: calc(100vh-100px);
background-image: url('imagealien.jpg');
background-repeat: no-repeat;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: table;
}
.vertical-center {
display: table-cell;
vertical-align: middle;
}
.index-banner h2 {
font-size: 60px;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 69px;
text-shadow: 2px 2px 8px black;
}
.index-banner h3 {
font-size: 60px;
color: #fff;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 8px black;
}
.index-banner h1 {
font-size: 28px;
color: #fff;
font-style: italic;
line-height: 40px;
text-align: center;
text-shadow: 2px 2px 8px black;
}
.index-links div {
margin: 16px 16px 0;
width: calc(100%-32px);
height: 100px;
background-color: #f2f2f2;
}
.index-links div h3 {
font-family: Arial;
font-size: 28px;
color: #111;
font-weight: bold;
line-height: 40px;
text-align: center;
line-height: 100px;
}
/* FOOTER */
footer {
padding: 40px 40px;
width: calc(100%);
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a{
font-family: Arial;
font-size: 24px;
font-weight: bold;
color: white;
line-height: 30px;
}
.footer-links-cases {
display: none;
}
.footer-sm {
width: 50px;
float: right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
height: 42px;
}