Develop Reference

Centering two elements horizontally? [duplicate]

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Vertically align text next to an image?
(26 answers)
Closed 2 years ago.
I have this problem where I want to line up two elements (a <p> and a <button>) but I can't seem to find a way of lining them up; I have tried using padding, margin, flex and even grid design, but nothing seems to work.
Here is an image showcasing the problem:
Image
And here is a code snippet of my latest attempt:
.line p {
display: inline-block;
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Oswald', sans-serif;
font-size: 20px;
width: 100%;
border-bottom: lightgray solid 1px;
}
.activeLine {
color: #38B938;
background-color: white;
}
.buttonsActive {
background-color: inherit;
border: 1.5px solid #38B938;
color: #38B938;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
}
.inactiveLine {
background-color: white;
}
.inactiveLine {
background-color: white;
}
.buttonsA {
background-color: inherit;
color: black;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
float: right;
margin-right: 10px;
}
.buttonsA:hover {
color: #38B938;
transition: linear 0.5s;
}
.buttonsA:first-child {
margin-left: 10px;
float:left;
border: 1.5px solid black;
}
.buttonsA:first-child:hover {
color: #38B938;
border: 1.5px solid #38B938;
transition: linear 0.5s;
}
.buttonsActive:first-child {
margin-left: 10px;
float:left;
}
<div class="voiceGrid">
<div class="titleVoiceBanner">
<h2 class="textVoiceTitle">Problem for </h2>
<h3 class="textVoiceSubtlt">Stack Overflow</h3>
</div>
<div>
<audio id="player1">
<source type="audio/mpeg">
</audio>
<div class="line inactiveLine" id="line1">
<p>
<button id="buttonPlay" class="buttonsA">▶</i></button>
Loc 1
</p>
</div>
</div>
</div>

This is actually quite easy with flexbox. Make the p tag a flex element and then use the align-items: center; to make them appear on the same line.
.line p {
display: flex; /* Change from inline-block to flex */
align-items: center; /* Added to make them appear on the same line */
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Oswald', sans-serif;
font-size: 20px;
width: 100%;
border-bottom: lightgray solid 1px;
}
.activeLine {
color: #38B938;
background-color: white;
}
.buttonsActive {
background-color: inherit;
border: 1.5px solid #38B938;
color: #38B938;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
}
.inactiveLine {
background-color: white;
}
.inactiveLine {
background-color: white;
}
.buttonsA {
background-color: inherit;
color: black;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
float: right;
margin-right: 10px;
}
.buttonsA:hover {
color: #38B938;
transition: linear 0.5s;
}
.buttonsA:first-child {
margin-left: 10px;
float:left;
border: 1.5px solid black;
}
.buttonsA:first-child:hover {
color: #38B938;
border: 1.5px solid #38B938;
transition: linear 0.5s;
}
.buttonsActive:first-child {
margin-left: 10px;
float:left;
}
<div class="voiceGrid">
<div class="titleVoiceBanner">
<h2 class="textVoiceTitle">Problem for </h2>
<h3 class="textVoiceSubtlt">Stack Overflow</h3>
</div>
<div>
<audio id="player1">
<source type="audio/mpeg">
</audio>
<div class="line inactiveLine" id="line1">
<p>
<button id="buttonPlay" class="buttonsA">▶</i></button>
Loc 1
</p>
</div>
</div>
</div>

Why won't my accordion close all the way?

I'm making some accordion FAQ questions. When I add padding around the answer portion, my accordion won't close all the way. When I remove the padding, the accordion works fine. The problem is that I want the padding.
As stated before, my accordion works perfectly fine when padding is removed. When the padding is added back, the collapsed answer still shows the first few lines of text in the answer.
(The accordion in question is the last entry on the page, headed with "0002.")
body {
font-family: 'work sans', Arial, sans-serif;
font-size: 14px;
color: #999;
margin: 0px;
padding: 0px;
background-color: #010101;
background: url(https://imgur.com/YRl8KNP.png) fixed center;
background-size: cover;
text-align: left;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-track {
background-color: #000;
}
::-webkit-scrollbar-thumb {
background-color: #010101;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: #999;
}
#header {
padding: 160px;
}
.h_title {
font: 150px 'work sans';
color: #fff;
margin-left: 45px;
text-transform: uppercase;
}
.h_menu {
border-top: 1px solid #999;
width: 1100px;
margin: 0 auto;
padding: 20px 0px;
margin-bottom: 175px;
}
.h_top {
text-align: right;
font: 12px 'work sans';
color: #fff;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 900;
}
.h_top::before {
content: '////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////';
font: 11px 'arial';
font-weight: 400;
display: block;
color: #ff00ff;
margin-bottom: 20px;
letter-spacing: 4px;
}
.h_tabs input {
display: none;
}
.h_tabs {
position: relative;
overflow: hidden;
height: 230px;
margin-top: 30px;
}
.h_tabs label {
position: absolute;
right: 0px;
top: 20px;
font: 9px 'work sans';
letter-spacing: 5px;
color: #fff;
cursor: crosshair;
}
.h_tabs label:nth-of-type(2) {
top: 90px;
}
.h_tabs label:nth-of-type(3) {
top: 160px;
}
.h_tabs label b {
color: #ff00ff;
font-weight: 700;
}
.h_tabs label span {
opacity: 0;
transition: 0.6s;
}
.h_tabs label:after {
content: '001';
display: inline-block;
overflow: hidden;
width: 40px;
text-align: right;
font-eight: 100;
color: #fff;
transition: 0.6s;
font-weight: bold;
}
.h_tabs label:nth-of-type(2):after {
content: '002';
}
.h_tabs label:nth-of-type(3):after {
content: '003';
}
.h_tabs input:checked+label span {
opacity: 1;
transition: 0.6s;
}
.h_tabs input:checked+label::after {
width: 0px;
transition: 0.6s;
}
.h_tab1,
.h_tab2 {
width: 700px;
position: absolute;
left: 50px;
top: 50px;
opacity: 0;
}
.h_blurb {
font: 14px 'work sans';
color: #ccc;
letter-spacing: 1px;
}
.h_cont {
background: #171717;
padding: 20px;
margin-top: 25px;
overflow: hidden;
display: inline-block;
}
.h_nav a {
display: inline-block;
position: relative;
width: 180px;
margin: 0px 35px 15px 0px;
border-bottom: 1px solid #333;
padding: 6px;
font: 12px 'share tech mono';
text-transform: uppercase;
letter-spacing: 1px;
color: #aaa;
}
.h_nav a::after {
content: '';
width: 15px;
height: 2px;
position: absolute;
left: 0;
bottom: -1px;
background: #ff00ff;
transition: 0.5s;
}
.h_nav a:nth-of-type(2n):after {
background: #ff00ff;
}
.h_nav a:nth-of-type(3n):after {
background: #ff00ff;
}
.h_nav a:hover:after {
width: 180px;
transition: 0.5s;
}
#htab1:checked~.h_tab1,
#htab2:checked~.h_tab2 {
opacity: 1;
z-index: 2;
}
#lean_overlay {
position: fixed;
z-index: 99;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: url(https://i.imgur.com/zdXP0Uo.jpg) fixed center;
background-size: cover;
display: none;
}
#Pages #wrapper {
background: transparent;
}
#page_container {
width: 1100px;
overflow: hidden;
padding: 15px 0px;
margin: 15px 0px;
}
.page_menu {
font: 12px 'share tech mono';
width: 220px;
margin-right: 50px;
margin-left: 12px;
float: left;
}
.page_menu a:active {
color: #ff00ff;
}
.page_menu h1 {
font: 17px 'work sans';
font-weight: 700;
text-transform: lowercase;
color: #fff;
margin: 30px 0px 10px 0px;
}
.page_menu h1:before {
content: '/ ';
font-weight: 300;
margin-right: 5px;
color: #ccc;
}
.page_content {
background: #171717;
width: 705px;
float: left;
outline: 1px solid rgba(255, 255, 255, 0.2);
outline-offset: 10px;
padding: 50px;
text-align: justify;
line-height: 150%;
}
.page_content h1 {
font: 50px 'work sans';
text-transform: uppercase;
font-weight: 300;
color: #fff;
margin: 0px;
overflow: hidden;
text-align: left;
display: block;
letter-spacing: 1px;
}
.page_content h2 {
font: 15px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 10px 0px;
color: #ff00ff;
}
.page_text {
padding: 20px 50px;
}
.page_text u {
color: #fff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none;
font-size: 12px;
}
.page_em {
margin: 30px;
font: 10px 'share tech mono';
line-height: 17px;
border: 1px solid #333;
padding: 30px;
}
.page_em u {
color: #ff00ff;
font-style: normal;
font-size: 10px;
letter-spacing: 0px;
line-height: 17px;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
}
.page_menu ol {
counter-reset: item;
margin: 0px;
padding-left: 10px;
}
.page_menu li ol {
padding-left: 15px;
}
.page_menu b {
color: #ff00ff;
font-weight: bold;
}
.page_menu ol li {
display: block;
}
.page_menu li:before {
content: counters(item, ".") ". ";
counter-increment: item;
font-size: 9px;
line-height: 25px;
color: #ff00ff;
}
.sub_canons li {
border-top: 1px solid #333;
border-bottom: 1px solid #333;
font: 7px 'work sans';
text-transform: uppercase;
letter-spacing: 1px;
padding: 20px 0px;
margin-bottom: 10px;
}
.sub_canons {
list-style-type: none;
margin: 30px 0px;
padding-left: 50px;
}
.sub_canons li b {
display: block;
font: 10px 'share tech mono';
}
.page_content h3 {
font: 14px 'share tech mono';
text-align: right;
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h3::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 12px;
color: #ff00ff;
}
.page_content h4 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h4::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #ff1053;
}
.page_content h5 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h5::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #4592f7;
}
.page_content h6 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h6::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #ff5f32;
}
/* Tagging */
a.user-tagged.mgroup-4 {
color: #744dba;
}
a.user-tagged.mgroup-8 {
color: #ff1053;
}
a.user-tagged.mgroup-6 {
color: #4592f7;
}
a.user-tagged.mgroup-7 {
color: #ff5f32;
}
.iconpad {
padding: 10px;
border: 1px solid #222;
margin-right: 10px;
float: left;
margin-top: 5px;
}
.padex {
padding: 10px;
text-align: justify;
}
::-moz-selection {
color: #ff00ff;
}
::selection {
color: #ff00ff;
}
faqentry {
margin: 0px 20px 5px 20px;
display: block;
}
faqentry ol li {
margin: 10px 15px 10px 10px;
padding-left: 15px;
font-size: 9px;
color: #d8fe56;
}
div.toggle {
margin: 10px 30px 20px 30px;
padding: 40px;
line-height: 170%!important;
background: rgba(0, 0, 0, 0.3);
display: block;
}
<!DOCTYPE html>
<html>
<head>
<style>
.accordion {
font: 14px 'share tech mono';
text-align: right;
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
background: none;
border: none;
transition: 0.4s;
}
div.panel {
margin: 10px 30px 20px 30px;
padding: 40px;
line-height: 170%;
background: rgba(0, 0, 0, 0.3);
display: block;
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
</style>
<link rel="shortcut icon" href="HERE">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100,400,700,900|Share+Tech+Mono" rel="stylesheet">
<title>STICTION</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<LINK REL=StyleSheet HREF="STICTION.css" TYPE="text/css">
</head>
<div id="header">
<div class="h_title">stiction</div>
<div class="h_menu">
<div class="h_top"></div>
<div class="h_tabs">
<input id="htab1" type="radio" name="htabs" checked>
<label for="htab1"><span>CANDY TEETH, NEON IDIOTS.</span> <b>/</b></label>
<input id="htab2" type="radio" name="htabs">
<label for="htab2"><span>OTHER LINKS</span> <b>/</b></label>
<div class="h_tab1">
<div class="h_blurb"><i>Welcome to the new world; myth meets the future. Where do you fit in?</i><br><br>
<span style="text-transform: uppercase; font-family: share tech mono; font-size: 11px;">literate supernatural and cyberpunk group roleplay set in City 0215 during the year 2447.</span>
</div>
</div>
<div class="h_tab2">
<div class="h_nav">
DISCORD
DIRECTORY
PLAYLIST
</div>
</div>
</div>
</div>
<div id="page_container">
<div class="page_menu">
<ol>
<li>INDEX</li>
</ol>
<h1>ESSENTIAL READS</h1>
<ol>
<li>QUICK-START GUIDE</li>
<span style="color: #ff00ff; font-weight: bold;">RULES</span>
<li>HISTORY</li>
<li>SETTING</li>
<li>SPECIES</li>
<ol>
<li>LIVING</li>
<li>DECEASED</li>
<li>PRUGATORIC</li>
</ol>
</ol>
<h1>IN-DEPTH CONTENT</h1>
<ol>
<li>FAQ</li>
<li>SUBPLOTS</li>
<ol>
<li>SUBPLOT 001</li>
<li>SUBPLOT 002</li>
<li>SUBPLOT 003</li>
</ol>
<li>OFFICIAL SERVER FACTIONS</li>
<li>MEMBER-CREATED FACTIONS</li>
</ol>
</div>
<div class="page_content">
<div class="page_text" id="top">
<h1>lore questions</h1>
<div class="page_em"><u>A NOTE</u> This world- the world of <u style="color: #4fecc8; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 7px; font-family: 'work sans', Arial, sans-serif;">STICTION</u>- isn't just the project and product of
the staff team. We want you to feel that you can contribute to this world! To that end, these are all questions that guests and members have asked in our Discord. Questions are either answered according to existing lore, or (in cases where the
staff team hasn't thought of a situation or scenario) are talked out with members to come to a satisfying answer. This page is updated regularly, so make sure you keep an eye on it!
<p>
It's probably easiest to explore this page using the <b>CRTL+F</b> function, especially if you have specific questions!</div>
<h2>quick links</h2>
<faqentry id="quick links">
<ol>
<li><u>world-building</u></li>
<li><u>subplots</u></li>
<ol>
<li><u>crossed wires subplot</u></li>
<li><u>live for the applause subplot</u></li>
<li><u>blood and chocolate subplot</u></li>
</ol>
<li><u>species-specific</u>
<ol>
<li><u>general abilities</u></li>
<li><u>witches</u></li>
<li><u>shifters</u></li>
<li><u>vampires</u></li>
<li><u>reapers</u></li>
<li><u>ghosts</u></li>
<li><u>phoenixes</u></li>
<li><u>familiars</u></li>
<li><u>androids</u></li>
</ol>
</ol>
</faqentry>
<a name="section"> </a>
<Br><br>
<h2>world-building</h2>
<h3>context clues</h3>
Before you get started exploring this new world, it’s helpful to keep in mind a few things for context! (It might even help you answer your own questions, who knows?) The first bit of info you’ll need is that electricity and all other forms of energy
are obsolete; instead, the world runs on magic energy. That leads into point two, which is that supernatural, magic creatures are no longer monsters under the bed, or creatures in the shadow; they live open, public lives.<br><br> Since
this is a cyberpunk site, it stands to reason that technology is wildly more advanced than what we have now. It’s no so advanced that interstellar travel exists, but it’s so much farther ahead that paper (and privacy, in a lot of ways) is a thing
of the past. Every person on the planet is in some way connected to the Global Communications Lattice (or GCL) for short, and everything on the planet runs through it. As far as specific pieces of technology go, that’s largely up to you, your
ideas, and genre standards.<br>
<Br> It never hurts to ask an admin or run an idea by us before executing an idea, though!
<button class="accordion"><h3>What's the primary language spoken in City 0023? What about the rest of the world?</h3></button>
<div class="panel">English has become the primary language of most of the world, but thanks to the ease of information access, every language (even dead languages) can be learned now! Linguistic diversity not only still exists in this world, but is flourishing;
most people can claim some form of bilingualism. English, French, and Chinese are the top three languages spoken in City 0023.</div>
<br>
<Br>
<u>Back to Top</u>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>

To answer your original question, as you discovered, as long as that .panel div has top and bottom padding, it will have an intrinsic minimum height which is why it wasn't closing all the way.
The easiest way I can think of to achieve the desired result without changing too much of your existing code is to nest the text inside a div that is a child of .panel and move the padding property (and optionally the line-height property as well) to the nested element (which I called .panel__content -- you can call it whatever you want).
div.panel {
margin:10px 30px 20px 30px;
background:rgba(0,0,0,0.3);
display:block;
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
.panel__content {
padding:40px;
line-height: 170%;
}
<div class="panel">
<div class="panel__content">English has become the primary language of most of the world, but thanks to the ease of information access, every language (even dead languages) can be learned now! Linguistic diversity not only still exists in this world, but is flourishing; most people can claim some form of bilingualism. English, French, and Chinese are the top three languages spoken in City 0023.</div>
</div>
Working JSFidddle example
Some side notes:
I would also highly recommend that you validate your HTML and CSS, as you have a number of validation errors currently. Best way to do that is to paste your code into W3C's online validators:
HTML Validator:
https://validator.w3.org/#validate_by_input
CSS Validator:
https://jigsaw.w3.org/css-validator/#validate_by_input
You might not need to add div to your .panel selector to achieve the same result. All things being equal, it's a best practice to have selectors be as short as possible.
You might not need to set .panel to display:block; as div's have this property value by default.

Try adding
box-sizing: border-box;
On your panel. This should make it so the padding is a part of height. You may have to adjust other values if that shifts things slightly.
Otherwise, you could set padding top and bottom to 0 when closed and transition those values as well, when collapsing.

max-height property overrides the height property but the padding top and bottom value will added to the height when css is getting compiled and value of height well be 80px
so set the padding to
div.panel { padding: 0 40px }
and change your script to
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
panel.style.paddingTop = 0;
panel.style.paddingBottom = 0
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
panel.style.paddingTop = null;
panel.style.paddingBottom = null
}
})
}

How to make professional tabs for a game

I followed this youtube video exactly on how to make some professional tabs
https://www.youtube.com/watch?v=FvzZjg-uP2k&t=241s
But my code didn't turn out the same way. I want it like theirs so i can scroll through the different tabs and make a separate html file for each one
I have tried following the video ( new at css) and i think i formatted it correctly
Here is my css/ html code:
Css code:
body {
margin: auto;
background: #efefef;
font-family: arial;
}
.nav_bar {
margin: auto;
border-bottom: 1px solid #000000;
width: 860px;
padding: 0px 20px 0px 20px;
height: 64px
margin-top: 30px;
}
.nav_bar ul {
padding: 0;
list-style: none;
}
.nav_bar ul li {
float: left;
font-size: 16px;
font-weight: bold;
margin-right: 10px;
}
.nav_bar ul li a {
text-decoration:none;
color: #000000;
background: #6db1e4;
border: 1px solid #000000;
border-bottom: none;
padding: 23px 20px 22px 20px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
width: 75px;
display: block;
text-align: center;
}
.nav_bar ul li a:hover{
text-decoration: none;
color: #000000;
background: #96e0e9;
-moz-transition: background-color 200ms ease-in;
-webkit-transition: background-color 200ms ease-in;
-ms-transition: background-color 200ms ease-in;
-o-transition: background-color 200ms ease-in;
transition: background-color 200ms ease-in;
}
.nav_bar ul li a#onlink {
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
}
.nav_bar ul li a#onlink:hover;{
background: #ffffff;
color: #000000;
}
.main_container{
margin auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
.main_container p {
font-size: 14px;
margin: 0;
padding: 0;
}
My html code:
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body
<div class="nav_bar">
<ul>
<li>Home</li>
<li>SkillTree</li>
<li>Equipment</li>
<li>Pets</li>
<li>Skills</li>
<li>Quests</li>
</ul>
</div>
<div class="main_container">
<p> This is the home page.</p>
</div>
</body>
</html>
I expect the html link to look like what he has at the end of the video, but the actual output is a bit off and cant scroll through the pages http://prntscr.com/nrkf6v this is my output not correct

You haven't formatted it correctly.
You had 5 or 6 CSS errors and a big one in HTML. (<body tag wasn't closed). As a rule of thumb, in web, every character counts. There are some exceptions, but that's exactly what they are: exceptions.
The rule is: "every mistake breaks something".
Here's the correct output.
The tool you want to check your code against is called validator. (HTML validator, CSS validator, etc...). Or you can use an IDE (a smart editor which understands and suggests code as you type, also letting you know when it thinks you've made a mistake, considering current web standards).
body {
margin: auto;
background: #efefef;
font-family: arial;
}
.nav_bar {
margin: auto;
border-bottom: 1px solid #000000;
width: 860px;
padding: 0 20px 0 20px;
height: 64px;
margin-top: 30px;
}
.nav_bar ul {
padding: 0;
list-style: none;
}
.nav_bar ul li {
float: left;
font-size: 16px;
font-weight: bold;
margin-right: 10px;
}
.nav_bar ul li a {
text-decoration: none;
color: #000000;
background: #6db1e4;
border: 1px solid #000000;
border-bottom: none;
padding: 23px 20px 22px 20px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
width: 75px;
display: block;
text-align: center;
}
.nav_bar ul li a:hover {
text-decoration: none;
color: #000000;
background: #96e0e9;
-moz-transition: background-color 200ms ease-in;
-webkit-transition: background-color 200ms ease-in;
-ms-transition: background-color 200ms ease-in;
-o-transition: background-color 200ms ease-in;
transition: background-color 200ms ease-in;
}
.nav_bar ul li a#onlink {
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
}
.nav_bar ul li a#onlink:hover {
background: #ffffff;
color: #000000;
}
.main_container {
margin: auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
.main_container p {
font-size: 14px;
margin: 0;
padding: 0;
}
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav_bar">
<ul>
<li>Home</li>
<li>SkillTree</li>
<li>Equipment</li>
<li>Pets</li>
<li>Skills</li>
<li>Quests</li>
</ul>
</div>
<div class="main_container">
<p> This is the home page.</p>
</div>
</body>
</html>

"Contact Me" Button won't get smaller when page is resized

All the other elements of the page seem to resize whenever i make the window smaller, but it seems like the "Contact Me" Button seems to disappear whenever i resize the page, I've been trying to fix this problem for a while by changing the position of the button by itself, but it seems like nothing I've been doing has fixed the problem yet. Any help would be awesome thanks!
HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" type= "text/css" href="css/style.css">
<title>Jaylen Cooper</title>
<body>
<div class="image_one" id="main">
<img src="http://d2tovwv1y8kfyq.cloudfront.net/wp-content/uploads/2016/07/28105929/tech3.jpg" class="image_one">
<h1>Hello, My Name Is Jaylen Cooper, And I Develop Websites and User Interfaces</h1>
</div>
<div>
<button id="myBtn" class="myBtn" align="middle">Contact Me</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>CONTACT INFORMATION</h3>
<form>
<label for="Email">Email Address</label>
<input type="text" name="Email"/>
<label for="Info">Brief Information</label>
<input type="text" name="lName"/>
<input type="submit" value="SUBMIT">
</form>
</div>
</div>
<div class="nav_body">
<h2><b><center>My Preferences</center></b></h2>
</div>
<div>
<img src="http://pluspng.com/img-png/coder-png-source-code-icon-1600.png" height="150px" class="image_One">
<img src="https://png.icons8.com/metro/540/graduation-cap.png" height="100px" class="image_Two">
<img src="http://www.freeiconspng.com/uploads/brain-2.png" height="150px" class="image_Three">
</div>
<div class="text_display">
<p1 id="text"><b>CODE</b></p1>
</div>
<div class="third_text">
<p5 id="text2"><b><br> The Best Languages that I know right now are<br> HTML,CSS,JavaScript,<br> and a basic ammount of Python<br> and Java.</b></p5>
<p4 id="text2"><b><br> &#9867<br> I'm always looking to collaborate <br> with other developers on other project<br>If you know any other coding communities <br>Feel Free To Contact Me.</b></p4>
<p6 id="text2"><b><br> &#9867<br> The Ideas that I usually have<br> are Website Based and Mobile,<br> Want To Pursue SQL.</b></p6>
</div>
<div class="fourth_box">
<h7><b>WORK</b></h7>
</div>
<div class="fifth_box">
<img src="http://www.freepngimg.com/thumb/coming_soon/4-2-coming-soon-png-thumb.png" class="coming_soon">
</div class="third_text">
<div class="About_Me">
<h9><b><center>ABOUT ME</center></b></h9>
</div>
<div class="aboutme_box">
<p id="aboutme_text"><b>I Live In Dallas,Texas <br>&#9867</b></p>
<p id="aboutme_text"><b>I'm 19 Years Old. <br>&#9867</b></p>
<p id="aboutme_text"><b>I've Been Coding For A Year. <br>&#9867</b></p>
<p id="aboutme_text"><b>Graduated High School In 2017. <br>&#9867</b></p>
<p id="aboutme_text"><b>Attending Community College For Computer Science 2018.<br>&#9867</b></p>
<p id="aboutme_text"><b>My Favorite Color Is Blue. <br>&#9867</b></p>
<p id="aboutme_text"><b>I Love Watching Twitch On My Down Time. <br> &#9867</b></p>
<p id="aboutme_text"><b>If You Would Like To Know More About Me Shoot Me A Email.</b></p>
</div>
<div class="Hyperlink_images">
<a href="https://twitter.com/slitheirings">
<img src="http://www.freeiconspng.com/uploads/twitter-icon--basic-round-social-iconset--s-icons-0.png" class="hyperlink_one" width="100px" id="hyperlink" href="https://twitter.com/slitheirings">
</a>
<a href="https://www.instagram.com/coop2824">
<img src="http://www.freeiconspng.com/uploads/instagram-logo-icon--icon-search-engine-5.png" class="hyperlink_two" width="100px" id="hyperlink" href="https://www.instagram.com/coop2824/">
</a>
<a href="https://www.facebook.com/profile.php?id=100004979988388">
<img src="https://cdn.worldvectorlogo.com/logos/facebook-3.svg" class="hyperlink_three" width="100px" id="hyperlink" href="https://www.facebook.com/profile.php?id=100004979988388">
</a>
<a href="https://stackoverflow.com/users/7928256/jaylen-cooper?tab=profile">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" width="100px" id="hyperlink" href="https://stackoverflow.com/users/7928256/jaylen-cooper?tab=profile">
</a>
<a href="https://github.com/Slitherings">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" width="100px" id="hyperlink" href="https://image.flaticon.com/icons/svg/25/25231.svg">
</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/javascript_index.js"></script>
</body>
CSS
html, body{
margin: 0;
text-align: center;
top: 100%;
}
.nav_body{
height: 100px;
}
h1{
position: absolute;
font-family: sans-serif;
font-size: 52px;
text-align: center;
padding-left: 100px;
padding-right: 100px;
color: white;
top: 250px;
}
.image_one{
position:relative;
width: 100%;
height: 1080px;
opacity: 0.85;
}
.Contact_text{
color: white;
font-size: 24px;
top: 600px;
text-decoration: none;
font-family: sans-serif;
padding-left: 100px;
padding-right: 100px;
left: 750px;
padding-top: 25px;
padding-bottom: 25px;
background-color: black;
opacity: 0.5;
transition-duration: 1s;
position: absolute;
}
.Contact_text:hover{
opacity: 1.0;
color: black;
background-color: white;
}
.Information_Text{
text-decoration: none;
color: white;
font-size: 16px;
position: absolute;
top: 710px;
font-family: sans-serif;
padding-left: 100px;
padding-right: 100px;
left: 785px;
padding-top: 25px;
padding-bottom: 25px;
transition: 1s;
}
.Down_Arrow{
top: 750px;
position: absolute;
padding-left: 100px;
padding-right: 100px;
left: 490px;
}
.Main_Image{
position: absolute;
top: 70px;
padding-left: 100px;
padding-right: 100px;
left: 425px;
}
h2{
font-family: sans-serif;
font-size: 64px;
text-align: center;
}
.image_One{
padding-left: 20px;
padding-bottom: 50px;
}
.image_Two{
padding-left: 185px;
padding-bottom: 70px;
}
.image_Three{
padding-left: 170px;
top: 40px;
padding-bottom: 50px;
}
p1{
font-family:sans-serif;
text-decoration: none;
font-size: 64px;
color: white;
}
p2{
font-family:sans-serif;
text-decoration: none;
font-size: 36px;
color: white;
}
p3{
font-family:sans-serif;
text-decoration: none;
font-size: 36px;
color: white;
}
.text_display{
display: inline-block;
height: 55px;
padding-top: 25px;
background-color: cadetblue;
width: 100%;
text-align: center;
padding-bottom: 25px;
}
#text{
padding:200px;
}
.second_display{
height: 200px;
display: inline-block;
width: 100%;
}
p4{
font-family: sans-serif;
font-size: 14px;
left: 500px;
}
p5{
font-family: sans-serif;
font-size: 14px;
}
p6{
font-family: sans-serif;
font-size: 14px;
}
#text2{
}
.third_text{
display: inline-block;
padding-top: 50px;
padding-bottom: 50px;
}
.slideshow-container{
max-width: 1000px;
position: relative;
margin: auto;
height: 300px;
}
.prev, .next{
cursor: pointer;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0.8)
}
.text{
color:cadetblue;
font-size: 15px;
padding: 8px 12px;
bottom: 10px;
width: 100%;
text-align: center;
}
.numbertext{
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
top: 0;
}
.dot{
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display:inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover{
background-color: #717171;
}
.fade{
-webkit-animation-name:fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade{
from {opacity: .4}
to {opacity: 1.0}
}
#keyframes fade{
from{opacity: .4}
to {opacity: 1.0}
}
.fourth_box{
height: 85px;
background-color: cadetblue;
padding-bottom: 150px;
}
#keyframes slider{
0%{
left: 0;
}
20%{
left 0;
}
25%{
left: -100%;
}
45%{
left: -100%;
}
50%{
left: -200%;
}
70%{
left: -200%;
}
75%{
left: -300%;
}
95%{
left: -400%;
}
100%{
left: -400%;
}
}
#slider{
overflow: hidden;
max-width: 600px;
width: auto;
left: 3500px;
position: fixed;
}
#slider figure img{
width: 20%;
float: left;
}
#slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slider infinite;
}
h7{
font-size: 64px;
font-family: sans-serif;
color: white;
left: 0;
position: relative;
top: 100px;
}
.contact_background{
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
top: 0;
}
.About_Me{
padding-top: 50px;
height: 100px;
background-color: cadetblue;
}
h9{
font-family: sans-serif;
font-size: 64px;
text-align: center;
color: white;
}
h10{
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
.submit_button{
text-decoration: none;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.clicktoclose{
font-family: sans-serif;
font-size: 16px;
color: white;
text-decoration: none;
}
.coming_soon{
text-align: center;
left: 500px;
}
.fifth_box{
padding-top: 100px;
padding-bottom: 100px;
}
#aboutme_text{
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
}
.aboutme_box{
padding-top: 50px;
padding-bottom: 50px;
}
.Hyperlink_images{
height: 200px;
background-color: cadetblue;
padding:100px;
}
#hyperlink{
padding:100px;
}
.Email_text{
font-family: sans-serif;
font-size: 48px;
text-decoration: none;
font-weight: bold;
}
.Category_text{
font-family: sans-serif;
font-size: 48px;
text-decoration: none;
font-weight: bold;
}
.myBtn{
transition:background-color 1.5s ease;
position: absolute;
background: coral;
padding: 1em 5em;
color: #fff;
border:0;
bottom: 410px;
left: 850px;
}
a{
text-decoration: none;
color: white;
font-weight: bold;
font-size: 15px;
}
.myBtn:hover{
background: cadetblue;
}
/* The Modal (background) */
.modal {
transition:background-color 1.5s ease;
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
input[type=text] {
transition:background-color 1.5s ease;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
font-family: sans-serif;
}
input[type=text]:focus {
background-color: coral;
opacity: 0.5;
}
label{
font-family: sans-serif;
font-weight: bold;
font-size: 26px;
}
h3{
font-family: sans-serif;
font-weight: bold;
font-size: 48px;
color: coral;
opacity: 0.4
}
input[type=button], input[type=submit], input[type=reset] {
transition:background-color 1.5s ease;
background-color: cadetblue;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
input[type=button], input[type=submit], input[type=reset]:hover{
background-color: coral;
opacity: 0.5;
font-family: sans-serif;
font-weight: bold;
}
Javascript
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var myopacity = 0;
function MyFadeFunction() {
if (myopacity<1) {
myopacity += .075;
setTimeout(function(){MyFadeFunction()},100);
}
document.getElementById('myModal').style.opacity = myopacity;
}
MyFadeFunction();
JSFiddle
Click if you want to see in browser
Again, any help would be great and it would really help me in the development of my portfolio website, I've been stuck on this problem for a while now. Thanks!

Nevermind, figured out the answer by readings Ben Kolya Mansleys, and Sergiu Post.
Thank you both for the help.
For Anyone That is wondering what i did
.myBtn{
transition:background-color 1.5s ease;
position: relative;
background: coral;
padding: 1em 5em;
color: #fff;
border:0;
bottom: 410px;
align-items: center;
justify-content: center;
}
HTML
<div style="width:100%; height: 100%">
<button id="myBtn" class="myBtn" align="middle"><a href="#">Contact
Me</a></button>
</div>
Simply put the button inside a div then and styled it with width and height, and added align-items and justify-content centered in CSS.
Again Thanks Ben and Sergiu!

You are pushing the button off of the page with this:
.myBtn {
left: 850px;
}
You could try changing that line to something like this (adjust as necessary):
left: calc(110px + 8em);

Angularjs Adding Style to Directive (With Css File)

I am trying to add a style to angularjs Directive with a seprated css file.
index-nav-bar-directive{
ul{
list-style: none;
margin: 0;
padding: 0;
}
h1{
background-color: #2980b9;
color:white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
.fa-plus{
float: right;
}`[![enter code here][1]][1]`
}
And my html file is :
<body ng-app="IndexApp" ng-controller="indexController">
<index-nav-bar-directive> </index-nav-bar-directive>
</body>
And my directive HTML File:
<div class="root">
<div id="container" class="col-md-2">
<h1> Mongo : Data Bases</h1>
<ul id="todoList">
<li><span><i class="fa fa-trash"></i></span> Go to Hogwards</li>
<li><SPAN><i class="fa fa-trash"></i></SPAN> Go to Potions class</li>
<li><span><i class="fa fa-trash"></i></span> Kill Voldemort</li>
</ul>
</div>
</div>
I already saw that answer :
How to CSS style angular directive?
But its didn't work out.
Thank you very much!

Solved by Checking The Css inside :
Suppose to be like this form (in css you can't reach to inner attribute like i did)
div[index-nav-bar-directive] ul{
list-style: none;
margin: 0;
padding: 0;
}
div[index-nav-bar-directive] h1{
background-color: #2980b9;
color:white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
div[index-nav-bar-directive] .fa-plus{
float: right;
}
div[index-nav-bar-directive] li{
cursor: pointer;
background-color: #fff;
height: 40px;
line-height: 40px;
color: #666;
}
div[index-nav-bar-directive] span{
background-color: #e74c3c;
height: 40px;
margin-right:20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
opacity: 0;
transition: 0.2s linear;
}
div[index-nav-bar-directive] li:hover span{
width: 40px;
opacity: 1.0
}
div[index-nav-bar-directive] input{
font-size: 18px;
color: #2980b9;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
div[index-nav-bar-directive] #container{
background-color: #f7f7f7;
width: 360px;
margin: 100px auto;
box-shadow: 0px 0px 7px 1px grey;
}