Centering a text box in align with an image and other textboxes - html

I've reached an obstacle I can't seem the get through in my styles.css. I'm re-creating a Google homepage, and for some reason cannot get the search bar to become centered in the page.
I've tried doing margin: auto 0;, border-left: 200px;, text-align: center;, but the search bar will not move (I put this within .searchbar .search).
.googlelogo {
display: block;
margin: 0 auto;
margin-top: 150px;
}
.nav {
display: flex;
justify-content: space-between;
}
.nav a {
text-decoration: none;
color: #696969;
}
.nav .nav-left .about,
.nav .nav-right .gmail {
padding: 10px;
}
.searchbar .search {
border-radius: 20px;
height: 30px;
width: 400px;
}
.searchbuttons {
text-align: center;
}
.button {
float: center;
background-color: #f2f2f2;
border: 1px solid #e4e4e4;
border-radius: 2px;
color: #595959;
font-size: 11px;
font-weight: bold;
padding: 6px 5px;
margin-right: 6.5px;
margin-left: 6.5px;
}
.footer {
display: flex;
flex-flow: row;
justify-content: space-between;
background-color: #f2f2f2;
padding: 15px;
margin-top: 240px;
width: 98%;
}
.footer a {
text-decoration: none;
color: #696969;
}
.footer .footer-left .advertising,
.footer .footer-left .business,
.footer .footer-left .howsearchworks {
margin: 0 10px;
}
.footer .footer-right .privacy,
.footer .footer-right .terms,
.footer .footer-right .settings {
margin: 0 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
<title>Google</title>
</head>
<body>
<div class='nav'>
<div class='nav-left'>
<a class='about' href='www.google.com/#'>About</a>
<a class='store' href='www.google.com/#'>Store</a>
</div>
<div class='nav-right'>
<a class='images' href='www.google.com/#'>Images</a>
<a class='gmail' href='www.google.com/#'>Gmail</a>
</div>
</div>
<div class='logo'>
<img class='googlelogo' src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c51f.png' alt='Google logo' height='250'>
</div>
<div class='searchbar'>
<form>
<input class='search' type='text'>
</form>
</div>
<div class='searchbuttons'>
<form>
<button class='button' label='Google Search'>Google Search</button>
<button class='button' label="I'm Feeling Lucky">I'm Feeling Lucky</button>
</form>
</div>
<div class='footer'>
<div class='footer-left'>
<a class='advertising' href='www.google.com/#'>Advertising</a>
<a class='business' href='www.google.com/#'>Business</a>
<a class='howsearchworks' href='www.google.com/#'>How Search works</a>
</div>
<div class='footer-right'>
<a class='privacy' href='www.google.com/#'>Privacy</a>
<a class='terms' href='www.google.com/#'>Terms</a>
<a class='settings' href='www.google.con/#'>Settings</a>
</div>
</div>
</html>
How can I get the search bar to become centered and aligned on the screen (formatted so it's above the two buttons below and below the Google logo)?


Added this
.searchbar {
display: flex;
justify-content: center;
padding-bottom: 1em;
}
.googlelogo {
display: block;
margin: 0 auto;
margin-top: 150px;
}
.nav {
display: flex;
justify-content: space-between;
}
.nav a {
text-decoration: none;
color: #696969;
}
.nav .nav-left .about,
.nav .nav-right .gmail {
padding: 10px;
}
.searchbar {
display: flex;
justify-content: center;
padding-bottom: 1em;
}
.searchbar .search {
border-radius: 20px;
height: 30px;
width: 400px;
}
.searchbuttons {
text-align: center;
}
.button {
float: center;
background-color: #f2f2f2;
border: 1px solid #e4e4e4;
border-radius: 2px;
color: #595959;
font-size: 11px;
font-weight: bold;
padding: 6px 5px;
margin-right: 6.5px;
margin-left: 6.5px;
}
.footer {
display: flex;
flex-flow: row;
justify-content: space-between;
background-color: #f2f2f2;
padding: 15px;
margin-top: 240px;
width: 98%;
}
.footer a {
text-decoration: none;
color: #696969;
}
.footer .footer-left .advertising,
.footer .footer-left .business,
.footer .footer-left .howsearchworks {
margin: 0 10px;
}
.footer .footer-right .privacy,
.footer .footer-right .terms,
.footer .footer-right .settings {
margin: 0 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
<title>Google</title>
</head>
<body>
<div class='nav'>
<div class='nav-left'>
<a class='about' href='www.google.com/#'>About</a>
<a class='store' href='www.google.com/#'>Store</a>
</div>
<div class='nav-right'>
<a class='images' href='www.google.com/#'>Images</a>
<a class='gmail' href='www.google.com/#'>Gmail</a>
</div>
</div>
<div class='logo'>
<img class='googlelogo' src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c51f.png' alt='Google logo' height='250'>
</div>
<div class='searchbar'>
<form>
<input class='search' type='text'>
</form>
</div>
<div class='searchbuttons'>
<form>
<button class='button' label='Google Search'>Google Search</button>
<button class='button' label="I'm Feeling Lucky">I'm Feeling Lucky</button>
</form>
</div>
<div class='footer'>
<div class='footer-left'>
<a class='advertising' href='www.google.com/#'>Advertising</a>
<a class='business' href='www.google.com/#'>Business</a>
<a class='howsearchworks' href='www.google.com/#'>How Search works</a>
</div>
<div class='footer-right'>
<a class='privacy' href='www.google.com/#'>Privacy</a>
<a class='terms' href='www.google.com/#'>Terms</a>
<a class='settings' href='www.google.con/#'>Settings</a>
</div>
</div>
</html>


<div class='searchbar'>
<form style="text-align: center">
<input class='search' type='text'>
</form>
</div>

Related

How do I separate the cards more in my project

How can I separate the cards in my project; I am new to HTML and am still learning so I don't know how to do this. I don't like how the cards are right up next to each other; is there any way I can fix this?
Here is my code:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center; /* Added */
flex-wrap:wrap;
}
.gameshell{
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center; /* Added */
flex-wrap:wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px!Important;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
<!DOCTYPE html>
<head>
<link rel="icon" type="png" href="/images/icon.png"/>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="gameshell">
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
</div>
</body>
</html>

There is a lot of duplicated and unnecessary code. Try removing it.
To increase the gap between div elements you can use the gap property.
Check out the docs here.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.gameshell {
height: auto;
justify-content: center;
display: flex;
gap: 1rem;
/*newly added*/
margin: 5px 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px!Important;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="gameshell">
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
</div>

Try grid for making layouts like this, it comes quite handy.
But right now I am guessing you are learning flex.
There are two ways you can do this.
First: the flex way
gap: 10px;
the gap property is actually quite great. It works just like its literal meaning. It produces a gap between your flex childs, Horizontally and vertically too.
Second: the css way
.card{
margin: 10px; //quite simple actually :)
}
try gap though (works with grid too)

Everything stays together. Im trying to get the search bar and the logo next to each other on the left side and extend the search to the end

Im trying to get the logo and search bar close together on the left side and extend the search bar to the right more. I dont know what else to do. Also I need to make a join and log in button to the right of everything. I also cant seem to get the submit button on the right side of the search field. Basically needs to look like this
#import url('https://fonts.googleapis.com/css?family=Poppins');
body {
font-family: 'Poppins';
}
header>div {
padding: 0 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lightgray;
}
nav {
width: 600px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
color: black;
}
.blackHeart {
width: 20px;
margin-right: 1rem;
}
.searchmenu {
padding-top: 12.5px;
padding-bottom: 12.5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 50px;
margin-left: .3rem;
display: right;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px;
background: red;
font-size: 17px;
border: none;
cursor: pointer;
color: white;
}
.topnav .search-container button:hover {
background: black;
}
.search {
background-color: rgba(211, 211, 211, 0.463);
float: right;
}
<!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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<header>
<div>
<div>
<img class="blackHeart" src="images/black-heart.png" alt="black heart" />
<span> Nifty Penguin Magic </span>
</div>
<nav>
<ul>
<li> npm Enterprise </li>
<li> Products </li>
<li> Solutions </li>
<li> Resources </li>
<li> Docs </li>
<li> Support </li>
</ul>
</nav>
</div>
<div class="searchmenu">
<ul>
<div>
<img class="logo" src="images/npm-logo.png" alt="npm logo">
</div>
<div class="topnav">
<div class="search-container">
<form>
<input type="text" placeholder="Search.." name="search" class="search">
<button type="submit">Submit</button>
</form>
</div>
</div>
<div>
Join Log In
</div>
</ul>
</div>
</header>
<body>
</body>
</html>

Is this work? I cancelled all float: right from your code and replaced with flexbox
#import url('https://fonts.googleapis.com/css?family=Poppins');
body {
font-family: 'Poppins';
}
header>div {
padding: 0 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lightgray;
}
nav {
width: 600px;
}
form {
display: flex;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
color: black;
}
.blackHeart {
width: 20px;
margin-right: 1rem;
}
.searchmenu {
padding-top: 12.5px;
padding-bottom: 12.5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 50px;
margin-left: .3rem;
display: right;
}
.topnav, .searchContainer {
width: 100%;
}
.topnav input[type=text] {
padding: 6px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
width: 18%;
padding: 6px;
background: red;
font-size: 17px;
border: none;
cursor: pointer;
color: white;
}
.topnav .search-container button:hover {
background: black;
}
.search {
background-color: rgba(211, 211, 211, 0.463);
width: 100%;
border: none;
outline: none;
}
.searchmenu ul {
padding: 0;
width: 100%;
display: flex;
align-items: center;
}
.searchDiv {
width: 78%;
display: flex;
align-items: center;
border: 1px solid black;
background-color: rgba(211, 211, 211, 0.463);
}
.icon {
width: 20px;
height: 20px;
}
<!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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<header>
<div>
<div>
<img class="blackHeart" src="images/black-heart.png" alt="black heart" />
<span> Nifty Penguin Magic </span>
</div>
<nav>
<ul>
<li> npm Enterprise </li>
<li> Products </li>
<li> Solutions </li>
<li> Resources </li>
<li> Docs </li>
<li> Support </li>
</ul>
</nav>
</div>
<div class="searchmenu">
<ul>
<div>
<img class="logo" src="images/npm-logo.png" alt="npm logo">
</div>
<div class="topnav">
<div class="search-container">
<form>
<div class="searchDiv">
<svg class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
<g>
<path d="m495,466.1l-119.2-119.2c29.1-35.5 46.5-80.8 46.5-130.3 0-113.5-92.1-205.6-205.6-205.6-113.6,0-205.7,92.1-205.7,205.7s92.1,205.7 205.7,205.7c49.4,0 94.8-17.4 130.3-46.5l119.1,119.1c8,8 20.9,8 28.9,0 8-8 8-20.9 0-28.9zm-443.2-249.4c-1.42109e-14-91 73.8-164.8 164.8-164.8 91,0 164.8,73.8 164.8,164.8s-73.8,164.8-164.8,164.8c-91,0-164.8-73.8-164.8-164.8z"/>
</g>
</svg>
<input type="text" placeholder="Search.." name="search" class="search">
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
<div>
Join Log In
</div>
</ul>
</div>
</header>
<body>
</body>
</html>

The problem is you are going with floats also i have made sime changes to your overall html and css you can compare with your code.
#import url("https://fonts.googleapis.com/css?family=Poppins");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins";
}
header > .firstnav {
padding: 12.5px 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lightgray;
}
nav {
width: 600px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
text-decoration: none;
color: black;
}
.blackHeart {
width: 20px;
margin-right: 1rem;
}
.searchmenu {
padding: 12.5px 25px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
width: 50px;
margin-left: 0.3rem;
}
.searchmenu form {
position: relative;
}
.searchmenu form svg {
width: 33px;
background: beige;
padding: 7px;
position: absolute;
color: black;
height: 34px;
top: -1px;
left: 29px;
}
.searchmenu input[type="text"] {
padding: 6px 35px;
font-size: 17px;
border: none;
background-color: rgba(211, 211, 211, 0.463);
margin-left: 30px;
width: 1050px;
}
.searchmenu button {
padding: 6px;
background: red;
font-size: 17px;
border: none;
cursor: pointer;
color: white;
}
.searchmenu ul li {
list-style: none;
padding: 5px 0;
}
.searchmenu ul li a {
text-decoration: none;
padding: 0 15px;
}
.searchmenu ul {
display: flex;
}
.join {
border: 1px solid grey;
}
and your HTML
<header>
<div class="firstnav">
<div>
<img
class="blackHeart"
src="images/black-heart.png"
alt="black heart"
/>
<span> Nifty Penguin Magic </span>
</div>
<nav>
<ul>
<li> npm Enterprise </li>
<li> Products </li>
<li> Solutions </li>
<li> Resources </li>
<li> Docs </li>
<li> Support </li>
</ul>
</nav>
</div>
<div class="searchmenu">
<div>
<img class="logo" src="images/npm-logo.png" alt="npm logo" />
</div>
<!-- <div class="topnav"> -->
<!-- <div class="search-container"> -->
<form>
<svg
class="icon"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
xmlns:xlink="http://www.w3.org/1999/xlink"
enable-background="new 0 0 512 512"
>
<g>
<path
d="m495,466.1l-119.2-119.2c29.1-35.5 46.5-80.8 46.5-130.3 0-113.5-92.1-205.6-205.6-205.6-113.6,0-205.7,92.1-205.7,205.7s92.1,205.7 205.7,205.7c49.4,0 94.8-17.4 130.3-46.5l119.1,119.1c8,8 20.9,8 28.9,0 8-8 8-20.9 0-28.9zm-443.2-249.4c-1.42109e-14-91 73.8-164.8 164.8-164.8 91,0 164.8,73.8 164.8,164.8s-73.8,164.8-164.8,164.8c-91,0-164.8-73.8-164.8-164.8z"
/>
</g>
</svg>
<input
type="text"
placeholder="Search.."
name="search"
class="search"
/>
<button type="submit">Submit</button>
</form>
<!-- </div> -->
<!-- </div> -->
<ul>
<li class="join">Join</li>
<li>Login</li>
</ul>
</div>
</header>

aligning an image and a gallery next to one another

I am trying to position the "selected" hero on the right to be aligned with the gallery of heroes to the left so I can add information and a button below the selected hero later on. This page is only missing a paragraph of text that will go below both the gallery; The selected hero and a confirmation button that will go under the hero portrait on the right. Would it be easier to contain all of it in one huge section? Or am I making this too complicated?
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time{
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow:hidden;
background-color: black;
}
.navbar a{
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover{
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
#heroList{
width: 1000px;
margin: 0 50px;
margin-top: 200px;
}
.heroes{
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames{
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color:black;
}
.heroes img{
width: 175px;
height: 175px;
}
#chosenHero{
width: auto;
margin: 0 50px;
margin-top: 50px;
}
.myHero{
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>

If you cannot use grid system, try following CSS modifications:
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time {
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow: hidden;
background-color: black;
}
.navbar a {
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
.navbar:after {
clear: both;
content: "";
display: block;
}
#heroList {
width: calc(100% - 200px);
float: left;
}
.heroes {
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames {
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color: black;
}
.heroes img {
width: 175px;
height: 175px;
}
#chosenHero {
width: 200px;
float: left;
}
.myHero {
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>

This would be the proper way of doing it.
https://i.imgur.com/xIm2fbV.png

Unable to add checkboxes to filter area

I'm trying to add filter options to my filter area but have been unsuccessful so far. Text appears just fine, but things like text boxes, radio boxes, buttons, etc aren't appearing for some reason. Probably a simple fix, but I'm very new to CSS, HTML and design in general. If anyone could point me in the right direction, that would be awesome!
Screenshot: https://i.imgur.com/5KwXys4.jpg
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='menu-container'>
<div class='menu'>
<div class='links'>
<div class='signup'>Sign Up</div>
<div class='login'>Login</div>
</div>
</div>
</div>
<div class='header-container'>
<div class='header'>
<div class='logo'><img src='images/postloco.svg'/></div>
</div>
</div>
<main>
<input id="toggle" type="checkbox">
<label for="toggle">
<div class="filterbutton"><img src='images/filterbutton.svg'/></div>
</label>
<div id="expand">
<section class="Filter">
<h2>Text field</h2>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>
</section>
</div>
</main>
<section class="carousel">
</section>
</body>
<footer>
<img src="images/facebook.svg" alt="facebook" title="facebook" href="#" class="social">
<img src="images/twitter.svg" alt="twitter" title="twitter" href="#" class="social">
<img src="images/instagram.svg" alt="instagram" title="instagram" href="#" class="social">
<img src="images/snapchat.svg" alt="snapchat" title="snapchat" href="#" class="social">
<ul>
<a alt="about" title="About" href="#" class="footerlink">About</a>
<a alt="about" title="About" href="#" class="footerlink">Contact</a>
<a alt="about" title="About" href="#" class="footerlink">Team</a>
<a alt="about" title="About" href="#" class="footerlink">Whatever</a>
</ul>
</footer>
</html>
CSS
* {
margin: 0;
padding: 0;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.menu-container {
color: #fff;
background-color: #A34F43;
padding: 20px 0;
display: flex;
justify-content: space-between;
}
.menu {
width: 100%;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.links {
display: flex;
justify-content: flex-end;
}
.login {
margin-left: 20px;
}
.header-container {
background-color: #FF7C69;
display: flex;
justify-content: center;
}
.header {
width: 100%;
height: 300px;
display: flex;
justify-content: space-between;
align-items: center;
}
.carousel-test {
display: flex;
justify-content: center;
}
.carousel-grid-container {
display: flex;
justify-content: center;
}
.carousel-grid {
width: 900px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.logo {
width: 200px;
display: block;
margin: 0 auto;
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: "Open Sans", Arial;
width: 100%;
}
main {
background: #FF7C69;
width: 100%;
margin: 0px auto;
}
input {
display: none;
visibility: hidden;
}
label {
/* display: block; */
/* text-align: center; */
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
label:hover {
color: #000;
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.3s;
background-color: #D6DBED;
color: black;
}
#toggle:checked ~ #expand {
height: 250px;
}
footer {
background-color: #A34F43;
text-align: right;
color: #eee;
text-align: center;
position: absolute;
width: 100%;
/* display: flex; */
}
.footerlink {
text-decoration: none;
color: white;
text-align: justify;
display: block;
padding: 1px;
}
.social {
padding: 10px;
width: 50px;
text-align: right;
float: right;
}
.social:hover {
opacity: 0.7;
}
legend {
background-color: #000;
color: #fff;
padding: 3px 6px;
}
.output {
font: 1rem 'Fira Sans', sans-serif;
}
input {
margin: .4rem;
}
.filterbutton {
margin: 0px;
padding: 0px;
width: 150px;
display: block;
}

In your css you have this line that is hiding all form inputs
input {
display: none;
visibility: hidden;
}
I don't think you want to globally hide all inputs like this. If you need to hide certain input items you can group them either by css or by putting them in special HTML tags (divs for instance)
I see that you are having your main form expand after clicking a checkbox. In this case things should still work after removing the line above.

How to get these element to stay centered

I have these blocks of code that I want to stay center the entire time. But I am not sure how. I am hoping you guys could help me out here.
Here is the code
main {
width: 70%;
float: left;
clear: both;
border-right: 1px solid #331a00;
}
main ul {
margin-top: 1em;
margin: auto;
width: 100%;
margin: auto
}
.index {
float: left;
border: 3px solid #b88f61;
margin-top: 1em;
margin-right: 2em;
list-style: none;
}
main ul {
margin-left: 3em
}
.index:hover {
box-shadow: 1px 2px 3px 4px grey;
border: 3px solid #331a00;
}
.index a div h3 {
background-color: #331a00;
padding: .5em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 100%;
text-align: center;
text-decoration: underline
}
.index a {
text-decoration: none;
}
.index a div img {
width: 150px;
height: 150px;
margin-bottom: -5px
}
#mobile_index {
display: none;
}
#medusa {
background-color: white;
;
}
#intro {
width: 70%;
margin: auto;
margin-bottom: 4em;
clear: both;
font-size: 120%
}
#intro h4 {
text-align: center;
padding: 1em 0;
font-size: 150%;
}
#intro h1 a {
text-decoration: none;
}
#intro h1 {
text-align: center;
}
/*ASIDE*/
aside figure {
width: 100%
}
aside {
width: 24%;
float: right;
margin-top: 1.5em;
}
aside h3 {
font-family: "Times New Roman", serif;
font-size: 1.5em;
font-weight: bolder;
padding-bottom: .5em;
text-align: center;
}
.popular {
display: block;
background-color: #331a00;
color: white;
padding: .5em;
margin-bottom: .3em;
margin-right: .1em;
margin-left: 0;
font-weight: bold;
}
aside figure figcaption {
margin-bottom: 1em;
width: 100%;
background-color: #331a00;
color: white;
font-weight: bold;
padding: .5em 0;
font-size: 1.2vw
}
form {
width: 100%
}
input[type="submit"] {
margin: auto
}
<main>
<h1 id="page_title">The Compendium of Greek Mythology</h1>
<ul>
<li class="index">
<a href="Compendium Gods.html">
<div>
<img src="images/The Gods.jpg" alt="Gods">
<h3>Gods</h3>
</div>
</a>
</li>
<li class="index">
<a href="#" alt="Heroes">
<div>
<img src="images/The Heroes.JPG">
<h3>Heroes</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Monsters.png" id="medusa" alt="Monsters">
<h3>Beasts</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Titans">
<h3>Titans</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Giants">
<h3>Giants</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Nymphs</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Constellations</h3>
</div>
</a>
</li>
</ul>
</main>
<aside>
<div>
<form method="get" action="http://www.google.com/search">
<h3>Search the Compendium</h3>
<input type="search" name="q" size="" maxlength="" placeholder="Google Search">
<input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
<input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
<input type="submit" name="search" value="Search">
</form>
</div>
<div>
<h3>Popular</h3>
<p class="popular">Zeus</p>
<p class="popular">Poseidon</p>
<p class="popular">Hercules</p>
<p class="popular">Dragon</p>
<p class="popular">Cyclops</p>
<p class="popular">Ares</p>
<p class="popular">Kronos</p>
<p class="popular">Perseus</p>
<p class="popular">Giants</p>
<p class="popular">Gaia</p>
<p class="popular">Oranos</p>
</div>
</aside>
Right now, the .index list items are staying on the left hand side of the main element. I've tried various things, but none of them worked out, which is why I am coming to you guys.

Remove padding and margin from <ul>, add text-align:center;
Remove the float:left; from .index and add display:inline-block;
main {
width: 70%;
float: left;
clear: both;
border-right: 1px solid #331a00;
}
main ul {
margin-top: 1em;
margin: auto;
width: 100%;
margin: auto;
}
/* Remove the float: left; from .index and add display: inline-block; */
.index {
display: inline-block;
border: 3px solid #b88f61;
margin-top: 1em;
margin-right: 2em;
list-style: none;
}
/* Remove padding and margin from UL, add text-align:center; */
main ul {
margin-left: 0;
padding-left: 0;
text-align: center;
}
.index:hover {
box-shadow: 1px 2px 3px 4px grey;
border: 3px solid #331a00;
}
.index a div h3 {
background-color: #331a00;
padding: .5em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 100%;
text-align: center;
text-decoration: underline;
}
.index a {
text-decoration: none;
}
.index a div img {
width: 150px;
height: 150px;
margin-bottom: -5px
}
#mobile_index {
display: none;
}
#medusa {
background-color: white; /* Removed extra ; */
}
#intro {
width: 70%;
margin: auto;
margin-bottom: 4em;
clear: both;
font-size: 120%;
}
#intro h4 {
text-align: center;
padding: 1em 0;
font-size: 150%;
}
#intro h1 a {
text-decoration: none;
}
#intro h1 {
text-align: center;
}
/*ASIDE*/
aside figure {
width: 100%
}
aside {
width: 24%;
float: right;
margin-top: 1.5em;
}
aside h3 {
font-family: "Times New Roman", serif;
font-size: 1.5em;
font-weight: bolder;
padding-bottom: .5em;
text-align: center;
}
.popular {
display: block;
background-color: #331a00;
color: white;
padding: .5em;
margin-bottom: .3em;
margin-right: .1em;
margin-left: 0;
font-weight: bold;
}
aside figure figcaption {
margin-bottom: 1em;
width: 100%;
background-color: #331a00;
color: white;
font-weight: bold;
padding: .5em 0;
font-size: 1.2vw
}
form {
width: 100%
}
input[type="submit"] {
margin: auto
}
<main>
<h1 id="page_title">The Compendium of Greek Mythology</h1>
<ul>
<li class="index">
<a href="Compendium Gods.html">
<div>
<img src="images/The Gods.jpg" alt="Gods">
<h3>Gods</h3>
</div>
</a>
</li>
<li class="index">
<a href="#" alt="Heroes">
<div>
<img src="images/The Heroes.JPG">
<h3>Heroes</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Monsters.png" id="medusa" alt="Monsters">
<h3>Beasts</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Titans">
<h3>Titans</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Giants">
<h3>Giants</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Nymphs</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Constellations</h3>
</div>
</a>
</li>
</ul>
</main>
<aside>
<div>
<form method="get" action="http://www.google.com/search">
<h3>Search the Compendium</h3>
<input type="search" name="q" size="" maxlength="" placeholder="Google Search">
<input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
<input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
<input type="submit" name="search" value="Search">
</form>
</div>
<div>
<h3>Popular</h3>
<p class="popular">Zeus</p>
<p class="popular">Poseidon</p>
<p class="popular">Hercules</p>
<p class="popular">Dragon</p>
<p class="popular">Cyclops</p>
<p class="popular">Ares</p>
<p class="popular">Kronos</p>
<p class="popular">Perseus</p>
<p class="popular">Giants</p>
<p class="popular">Gaia</p>
<p class="popular">Oranos</p>
</div>
</aside>