For the love of god, I cant get this to center properly. Ive tried many things but it just wont center with the nav bar. If anyone could point me in the direction of how to center it, please do. My bottom logo (Which happens to be the vault_logo) centers fine, but the same technique doesent seem to work with the logo im using.
.logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -10px;
border-style: solid;
border-color: rgb(245, 196, 98);
border-radius: 10px;
}
body {
background-color: rgb(18, 16, 20);
}
ul {
list-style-type: none;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
background-color: rgb(18, 16, 20);
overflow: hidden;
}
li {
float: left;
display: block;
}
li a {
font-family: Oswald-Regular;
display: block;
color: white;
text-align: center;
padding: 14px 214px;
text-decoration: none;
border-style: solid;
border-color: rgb(245, 196, 98);
border-width: 0.15px;
font-size: 1.14em;
}
li a:hover {
background-color: rgb(245, 196, 98);
}
li a:active {
background-color: rgb(245, 196, 98);
}
.intro {
font-size: 2em;
text-align: center;
color: white;
border-style: solid;
border-radius: 5px;
border-color: rgb(245, 196, 98);
padding: 2px;
}
.info {
border-style: solid;
border-color: rgb(245, 196, 98);
}
.info_title {
color: white;
font-family: Oswald-Regular;
border-style: solid;
border-color: rgb(245, 196, 98);
display: inline;
padding-left: 10px;
padding-right: 10px;
text-align: center;
border-radius: 0px 0px 30px;
}
.info_sub {
color: white;
font-family: Oswald-Regular;
text-align: center;
text-decoration: underline;
text-decoration-color: rgb(245, 196, 98);
}
.info_p {
color: white;
font-family: Oswald-Regular;
font-size: 1.3em;
padding-left: 10px;
padding-right: 10px;
}
.vault_logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 45%;
}
footer {
color: white;
font-size: 2em;
text-align: center;
}
@font-face {
font-family: Oswald-Regular;
src: url(Oswald-Regular.ttf);<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Team Nectar</title>
<link rel="stylesheet" href="home_styles.css">
</head>
<body>
<div>
<img class="logo" src="NTR_Logo.jpeg" alt="Smiley face" height="200" width="200">
</div>
<ul class="nav">
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">Teams</a></li>
<li><a href="contact.asp">Staff</a></li>
<li><a href="about.asp">Contact Us</a></li>
</ul>
<div class="info">
<h1 class="info_title"> Welcome to Team Nectar! </h1> <br>
<h2 class="info_sub"> We are a competitive E-Sports Organization with teams competing in Rocket League, Counter-Strike Global Offensive, Team Fortress 2 and Overwatch.</h2>
<p class="info_p"> Team Nectar was found by Brian "ppaleun" Lee-Kwong in the Summer of 2015, and
has been growing steadily since then. After forming their first Team Fortress 2 team, the team set its sights on lading in the top 3 during Season 19 of the 6v6 UGC League championships in the fall of 2015. The team not only landed in the top 3 during playoffs, but manage to take first place. After their victory, Team Nectars started a team in UGC Leagues Highlander and 4-versus-4 divisions.
Shortly after this, the organization became a reality, and in just 2 short years, operates 9 different teams in over 6 different leauges across North American and Europe, with over 40+ players bearing the Team Nectar name.
Currently, Team Nectar holds 7 First place titles and 13 top finalist titles in their respective leagues. </p>
</div>
<div class="sponsors">
<h2 class="info_sub"> Proudly sponsored by</h2>
<img src="vault_logo.png" class="vault_logo" height="220">
</div>
</body>
</html>PS: The logo sits inside that yellow border at the top of the page.
