We Keep Coding

Dropdown stays in the same place

The problem
Hello!
I have a problem with my hoverable dropdown menu. It always stays under the first navigation item even though it's not triggered, but it should be under the triggered navigation item (the navigation item on which the mouse pointer is located). How can i how can I fix that?
Thanks in advance!
#nav-list {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-item {
display: inline;
padding: 0;
}
.nav-item-text {
padding: 16px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: context-menu;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link {
padding: 20px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link:hover {
opacity: 100%;
cursor: pointer;
transition: .2s ease all;
color: var(--primary);
}
.nav-dropdown {
display: none;
opacity: 0;
position: absolute;
z-index: 99;
margin: 3px 0 0 0;
padding: 15px;
height: auto;
min-width: 280px;
background: var(--background);
border-radius: 4px;
border: 2px solid var(--elevation-16dp);
}
.nav-item:hover .nav-dropdown {
display: block;
transition: .2s ease all;
opacity: 100%;
}
<ul id="nav-list">
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title A 1</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title B 2</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
</ul>

You have to add this css to your code:
<style>
#nav-list > li {
position:relative;
}
#nav-list .nav-dropdown {
left: 0;
}
</style>

Adding an animation at the end of a scrolled section

I made this web page. There are 3 sections #sidebar, #postbar and #content and they have their own scroll. I'd like to add an animation that lets users know that they reached the end of a section.
I could be searching with wrong keywords, but most information is either about animation-as-scroll thing with a library such as AOS or jQuery solution to jump to the top or the bottom. Is there any native way to add such an animation with just javascript or maybe a simple css library?

You should try Intersection Obeserver :) Its pretty well supported now.
const mySections = document.querySelectorAll('.section');
observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
console.log('in the view');
} else {
console.log('out of view. FIRE EVENT!');
}
});
});
mySections.forEach(image => {
observer.observe(image);
});

You can check the scroll position compare to the offset height
var sidebar = document.getElementById('sidebar');
sidebar.addEventListener('scroll', function(e) {
if( e.target.scrollTop >= (e.target.scrollHeight - e.target.offsetHeight))
{
if (this.classList.contains('animate')) {
document.querySelector('#sidebar li:last-child').classList.remove('animate');
}
document.querySelector('#sidebar li:last-child').classList.add('animate');
}
});
.animate{
color: #ffffff;
-webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
-webkit-mask-size: 200%;
animation: shine 2s infinite;
}
#-webkit-keyframes shine {
from {
-webkit-mask-position: 150%;
}
to {
-webkit-mask-position: -50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Sidebar</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css'>
<link rel="shortcut icon" href="#">
<!-- <script src="{{ url_for('static', filename='script.js')}}"></script> -->
<!-- Font Awesome JS -->
<script>
console.log('default')
document.addEventListener('DOMContentLoaded', function () {
window.addEventListener('scroll', function(e) {
console.log(window.scrollY);
console.log(e.target);
if(e.target.tagName == 'ul'){
if( e.target.scrollTop === (e.target.scrollHeight - e.target.offsetHeight))
{
alert('done');
}
}
});
var postlist = document.getElementsByClassName("postlist");
var showPost = function() {
console.log('CLICKED')
var ps ='';// {{ postSource|safe }};
var idOfPost = this.id;
var iframe = document.getElementById("serviceFrameSend")
iframe.setAttribute("src", ps[idOfPost])
};
for (var i = 0; i < postlist.length; i++) {
postlist[i].addEventListener('click', showPost, false)
}
});
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous">
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous">
</script>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous">
</script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
</script>
<style>
/*
DEMO STYLE
*/
/*#import "https://fonts.googleapis.com/css?family=Menlo:300,400,500,600,700";*/
/* definition */
/* #font-face {
font-family: Menlo;
src: url('fonts/Menlo.ttc');
font-weight: normal;
font-style: normal;
} */
#import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
body {
/* font-family: 'Menlo', sans-serif; */
font-family: 'Fira Sans', sans-serif;
background: #2B3137;
overflow:hidden;
height: 100%;
}
p {
font-family: 'Fira Sans', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: #C7C7C7; /*원래inherit*/
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 0px dashed #ddd;
margin: 40px 0;
}
/* -------------------------------F--------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
height : 100px;
align-items: stretch;
}
#sidebar {
background: #2B3137;
color: #fff;
transition: all 0.3s;
height:95%;
position:fixed;
display:inline-block;
overflow:scroll;
width : 190px;
padding : 10px;
}
#notebook_title{
padding:20px;
text-align:center;
border-bottom: 0.0px solid #2B3137;
box-shadow: 0 0.1px 0 #C7C7C7;
color:#C7C7C7;
}
#postbar {
width : 240px;
background: #2B3137;
color: #fff;
transition: all 0.3s;
border-right: 0.1px solid #2A3446;
border-left: 0.1px solid #2A3446;
height:95%;
position:fixed;
display:inline-block;
overflow:scroll;
margin-left:190px;
padding : 10px 10px 10px 0px;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
margin : 2px 0px 5px 0px;
}
#posttbar .postbar-header {
padding: 20px;
background: #6d7fcc;
/* border-bottom: 0.1px solid #2B3137; */
box-shadow: 0 0.1px 0 #C7C7C7;
}
#sidebar ul.components {
padding: 0px 0;
border-bottom: 0px solid #47748b; /*색깔지움*/
}
#postbar ul.components {
/* padding: 20px 0; */
border-bottom: 0px solid #47748b;/*색깔지움*/
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#postbar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 0.9em;
display: block;
color:#C7C7C7;
}
#postbar ul li a {
padding: 10px;
font-size: 0.9em;
display: block;
height : 60px; /*포스트바블록사이즈*/
list-style-type:none;
color:#C7C7C7;
/* border-bottom: 0.1px solid #2B3137; */
box-shadow: 0 0.1px 0 #C7C7C7;
}
/*bullet제거*/
/* #postbar li {
list-style-type:none;
} */
#sidebar ul li a:hover {
color: #7386D5;
background: #fff; /*움직일때 색깔*/
}
#postbar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
#postbar ul li a:hover {
color: #7386D5;
background: #fff;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content{
width: 100%;
/* padding: 20px; */
/* min-height : 1000px; */
height: 100vh;
transition: all 0.3s;
background-color:#2B3137;
margin-left:420px;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: 0px; /* 원래 -250 */
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>HEADER</h3>
</div>
<ul class="list-unstyled components">
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>LAST</a>
</li>
</ul>
</nav>
<!-- POST BAR -->
<nav id="postbar">
<div id="notebook_title">{{currNoteBook}}</div>
<ul class="list-unstyled components">
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>LAST</a>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
Some Contents
</div>
</div>
<!-- partial -->
</body>
</html>

How to change size of prices without disrupting the menu?

I've been trying to get the size of the prices to change, but whenever I do it goes on top of the dotted line instead of staying above it.
//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');
//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
$(this).addClass('selected');
$('.page').hide();
$($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
window.scrollTo(0, 0); //scroll to the top of the page
});
body {
background: #e6e6e6;
font-family: "Open Sans", Sans Serif;
font-weight: 300;
color: #febd44;
margin: 0px;
}
ul,
li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 0.7s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
background: rgb(0, 163, 222);
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
color: #febd44;
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
.li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
}
strong {
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
em {
padding: 0 0 0 5px;
font: 28px "Times New Roman", Sans-serif;
}
sup {
font-size: 15px;
margin-left: 3px;
}
.price {
position: relative;
top: .9em;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<h1>Silver Spoon</h1>
</li>
<a class='page-button' data-page_num='1' href='javascript:voide(0)'>
<li class="main-button home-button">Home</li>
</a>
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<li class="main-button about-button">Menu</li>
</a>
</ul>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Menu">
<div class="content1">
<div class="container">
<h3>Bakery</h3>
<li class="li"><strong>Cheese Danish</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chocolate Chip Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Glazed Donuts</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Everything Bagels</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Plain Bagels</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Hot Breakfast</h3>
<li class="li"><strong>Egg Sandwich</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sausage Sandwich</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Egg Bites</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Egg Wraps</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Old-Fashioned Oatmeal</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content1">
<div class="container">
<h3>Sandwiches</h3>
<li class="li"><strong>Chicken Caprese</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sandwich</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Hamburger</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ham & Swiss Panini</strong>
<div class="price"><em>3</em><sup>00</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Deserts</h3>
<li class="li"><strong>Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Cake</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ice Cream</strong>
<div class="price"><em>1</em><sup>99</sup></div>
</li>
</div>
</div>
I tried to mess with the padding and margin, but it didn't change anything for me.
I just want to change the size of the prices while staying above the dotted lines

Just set the hight of .li explicitly, and also the size of .price em (that's the font size of the price).
//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');
//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
$(this).addClass('selected');
$('.page').hide();
$($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
window.scrollTo(0, 0); //scroll to the top of the page
});
body {
background: #e6e6e6;
font-family: "Open Sans", Sans Serif;
font-weight: 300;
color: #febd44;
margin: 0px;
}
ul,
li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 0.7s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
background: rgb(0, 163, 222);
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
color: #febd44;
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
.li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
/* set the height of the li explicitly */
height: 20px;
}
strong {
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
em {
padding: 0 0 0 5px;
font: 28px "Times New Roman", Sans-serif;
}
sup {
font-size: 15px;
margin-left: 3px;
}
.price {
position: relative;
float: right;
}
/* set the size of .price em */
.price em {
font-size: 50px;
}
/* set the size of .price sup */
.price sup {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<h1>Silver Spoon</h1>
</li>
<a class='page-button' data-page_num='1' href='javascript:voide(0)'>
<li class="main-button home-button">Home</li>
</a>
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<li class="main-button about-button">Menu</li>
</a>
</ul>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Menu">
<div class="content1">
<div class="container">
<h3>Bakery</h3>
<li class="li"><strong>Cheese Danish</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chocolate Chip Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Glazed Donuts</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Everything Bagels</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Plain Bagels</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Hot Breakfast</h3>
<li class="li"><strong>Egg Sandwich</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sausage Sandwich</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Egg Bites</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Egg Wraps</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Old-Fashioned Oatmeal</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content1">
<div class="container">
<h3>Sandwiches</h3>
<li class="li"><strong>Chicken Caprese</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sandwich</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Hamburger</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ham & Swiss Panini</strong>
<div class="price"><em>3</em><sup>00</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Deserts</h3>
<li class="li"><strong>Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Cake</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ice Cream</strong>
<div class="price"><em>1</em><sup>99</sup></div>
</li>
</div>
</div>
But I think it would be much better to use flexbox for this, and then you can set the font-size to whatever value you want, and don't have to worry about not displaying right:
body {
background: pink;
}
.menu-list {
list-style-type: disc;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
.menu-list .li {
margin: auto;
background: white;
display: flex;
width: 80%;
/* 'justify-content: space-between;' does the trick of
separating the two items in the li */
justify-content: space-between;
border-bottom: 1px dotted red;
}
.menu-list .li .title,
.menu-list .li .price {
display: flex;
}
.menu-list .li .title {
font-size: 18px;
align-self: flex-end;
}
.menu-list .li .price {
font-size: 30px;
}
<ul class="menu-list">
<li class="li"><span class="title">Food 1</span><span class="price">3<sup>50</sup></span></li>
<li class="li"><span class="title">Food 2</span><span class="price">5<sup>50</sup></span></li>
<li class="li"><span class="title">Food 3</span><span class="price">4<sup>00</sup></span></li>
</ul>

I have a problem changing menu link colors when scrolling

I am trying to change my navbar link colors when scrolling then if the position at top they have to be with the main color ,
i tried adding and removing classes with jquery but when the first i scroll they change forever else i have to refresh the page
**
$(window).scroll(function() {
if ($(document).scrollTop() > 600) {
$('.navbar , a:link ').addClass('color-change');
} else {
$('.navba , a:visited').removeClass('color-change');
};
});
.navbar {
position: fixed;
width: 100%;
height: 70px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
color: white;
background-color: blue;
margin: auto;
margin-top: 10px;
padding-top: 30px;
z-index: 9000;
}
.navbar.color-change {
background-color: white;
height: 60px;
color: black;
margin: auto;
padding-top: 20px;
}
a.color-change {
text-decoration: none;
color: black;
}
/*make sure the content is tall enough to scroll for this example*/
div.content {
min-height: 2000px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
<div class="container">
<ul>
<li class="brand">Donor</li>
<div class="menu">
<li> Home </li>
<li> Donate</li>
<li> Gallery</li>
<li> Blog</li>
<li> About</li>
<li> Contact</li>
</div>
</ul>
</div>
</div>
<div class="content"></div>
**

It looks like you may just have a typo on the line:
$('.navba , a:visited').removeClass('color-change');
However, a more direct way to undo the changes is to directly target the changed elements:
$('.color-change').removeClass('color-change');
$(window).scroll(function() {
if ($(document).scrollTop() > 600) {
$('.navbar , a:link ').addClass('color-change');
} else {
$('.color-change').removeClass('color-change');
};
});
.navbar {
position: fixed;
width: 100%;
height: 70px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
color: white;
background-color: blue;
margin: auto;
margin-top: 10px;
padding-top: 30px;
z-index: 9000;
}
.navbar.color-change {
background-color: white;
height: 60px;
color: black;
margin: auto;
padding-top: 20px;
}
a.color-change {
text-decoration: none;
color: black;
}
/*make sure the content is tall enough to scroll for this example*/
div.content {
min-height: 2000px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
<div class="container">
<ul>
<li class="brand">Donor</li>
<div class="menu">
<li> Home </li>
<li> Donate</li>
<li> Gallery</li>
<li> Blog</li>
<li> About</li>
<li> Contact</li>
</div>
</ul>
</div>
</div>
<div class="content"></div>

you have missing navbar spelling, please correct it ,please refer the below code it will help you (i have updated your code).
$(window).scroll(function() {
if ($(document).scrollTop() > 600) {
$('.navbar , a:link ').addClass('color-change');
} else {
$('.navbar , a:visited').removeClass('color-change');
};
});
.navbar {
position: fixed;
width: 100%;
height: 70px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
color:white;
background-color: blue ;
margin:auto;
margin-top:10px;
padding-top:30px;
z-index: 9000;
}
.navbar.color-change {
background-color: white;
height: 60px;
color:black;
margin:auto;
padding-top:20px;
}
a.color-change {
text-decoration: none;
color:black;
}
.max-height{
height : 100em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
<div class="container">
<ul>
<li class ="brand">Donor</li>
<div class="menu">
<li> Home </li>
<li> Donate</li>
<li> Gallery</li>
<li> Blog</li>
<li> About</li>
<li> Contact</li>
</div>
</ul>
</div>
</div>
<div class="max-height"> </div>

Why are my links leaking for my profile picture on my website?

I have a div that shows the instructors information. On click of their username or picture, the user will go to their instructor page. However, when I hover over the instructor picture, a blue line appears and I noticed there is an entire section of leaked link information.
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */
/* courses.php */
/* course intro */
#course_body {
background: #F4F4F4;
}
#course_intro {
border: 1px solid #DDDDDD;
background: white;
width: 568px;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
padding: 20px 20px 10px 20px;
position: relative;
top: 40px;
left: 50px;
}
#intro_title {
width: 562px;
position: relative;
top: 2px;
}
#intro_video {
width: 375px;
height: 210px;
position: relative;
top: -7px;
}
/* end of course intro */
/* course facts */
#course_facts {
border: 1px solid #DDDDDD;
background: white;
width: 568px;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
padding: 20px 20px 10px 20px;
position: relative;
top: -311px;
left: 750px;
font-size: 20px;
height: 115px;
}
.Rating {
position: relative;
width: 125px;
height: 25px;
top: -5px;
}
.Rating svg {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: 0;
}
.Rating meter {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #B6C2CC;
}
.Rating meter::-moz-meter-bar {
background: #FF7867;
}
.Rating meter::-webkit-meter-optimum-value, .Rating meter::-webkit-meter-suboptimum-value, .Rating meter::-webkit-meter-even-less-good-value {
background: #FF7867;
}
#facts_ratings {
position: relative;
top: -6px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}
#course_length {
position: relative;
top: -57px;
left: 200px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}
#course_time {
letter-spacing: 0;
font-weight: bold;
font-size: 18px;
color: #2E3D49;
}
/* end of course facts */
/* skill level */
#course_skillText {
position: relative;
top: -84px;
left: 280px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}
.fillSquare, .emptySquare {
display: inline-block;
position: relative;
left: 80px;
}
.fillSquare {
width: 12px;
height: 12px;
background: #666;
}
.emptySquare {
width: 12px;
height: 12px;
background: #B8B8B8;
}
#skill_level {
position: relative;
left: 85px;
top: -2px;
font-size: 12px;
letter-spacing: 1px;
font-weight: normal;
color: #2E3D49;
}
/* end of skill level */
/* Wish List button */
#course_wish {
border: 1px solid #ccc;
border-radius: 3px;
font-size: 15px;
position: absolute;
width: 87px;
padding: 5px;
position: relative;
top: -65px;
cursor: pointer;
box-shadow: rgba(0,0,0,0.0980392) 0 2px 3px 0;
border-radius: 3px;
}
#empty_heart {
color: #FF827F;
}
#course_wish_text {
position: relative;
left: 5px;
}
/* End of Wish List button */
/* Teacher div */
#teacher_div {
width: 326px;
border: 1px solid #ddd;
background: white;
position: relative;
left: 1002px;
padding: 15px;
top: -280px;
}
#teacher_picture {
width: 85px;
height: 85px;
border-radius: 50%;
position: relative;
left: 120px;
top: 3px;
}
#teacher_name {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
position: relative;
top: -15px;
width: 325px;
}
#teacher_div a {
text-decoration: none;
color: #00698C;
}
#teacher_div a:hover {
text-decoration: underline;
}
#teacher_tagLine {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #999;
text-align: center;
width: 325px;
position: relative;
top: -15px;
}
/* End of Teacher div */
/* end of courses.php */
<?php
require "connect.php";
?>
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src='main.js'></script>
</head>
<body id='course_body'>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development</li>
<li>Mobile Apps</li>
<li>Programming Languages</li>
<li>Game Development</li>
<li>Databases</li>
<li>Software Testing</li>
<li>Software Engineering</li>
<li>Development Tools</li>
<li>E-Commerce</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance</li>
<li>Entrepreneurship</li>
<li>Communications</li>
<li>Management</li>
<li>Sales</li>
<li>Strategy</li>
<li>Operations</li>
<li>Project Management</li>
<li>Business Law</li>
<li>Data and Anylytics</li>
<li>Home Business</li>
<li>Human Resources</li>
<li>Industry</li>
<li>Media</li>
<li>Real Estate</li>
<li>Other</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification</li>
<li class="dir">Network & Security
<li>Hardware</li>
<li>Operating Systems</li>
<li>Other</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft</li>
<li class="dir">Apple
<li>Google</li>
<li>SAP</li>
<li>Intuit</li>
<li>Salesforce</li>
<li>Oracle</li>
<li>Other</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation</li>
<li class="dir">Productivity
<li>Leadership</li>
<li>Personal Finance</li>
<li>Career Development</li>
<li>Parenting & Relationships</li>
<li>Happiness</li>
<li>Religion & Spirituality</li>
<li>Personal Brand Building</li>
<li>Creativity</li>
<li>Influence</li>
<li>Self Esteem</li>
<li>Stress Management</li>
<li>Memory and Study Skills</li>
<li>Motivation</li>
<li>Other</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design</li>
<li class="dir">Graphic Design
<li>Design Tools</li>
<li>User Experience</li>
<li>Game Design</li>
<li>Design Thinking</li>
<li>3D & Animation</li>
<li>Fashion</li>
<li>Architectural Design</li>
<li>Interior Design</li>
<li>Other</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing</li>
<li>Branding</li>
<li>Marketing Fundamentals</li>
<li>Analystics & Automation</li>
<li>Public Relations</li>
<li>Advertising</li>
<li>Video & Mobile Marketing</li>
<li>Content Marketing</li>
<li>Non-Digital Marketing</li>
<li>Growth Hacking</li>
<li>Affiliate Marketing</li>
<li>Product Marketing</li>
<li>Other</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks</li>
<li class="dir">Arts & Crafts</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup</li>
<li>Travel</li>
<li>Gaming</li>
<li>Home Improvement</li>
<li>Pet Care & Training</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography</li>
<li class="dir">Photography Fundamentals</li>
<li class="dir">Portraits
<li>Landscape</li>
<li>Black & White</li>
<li>Photography Tools</li>
<li>Mobile Photography</li>
<li>Travel Photography</li>
<li>Commercial Photography</li>
<li>Wedding Photography</li>
<li>Video Design</li>
<li>Other</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness</li>
<li class="dir">General Health</li>
<li class="dir">Sports
<li>Nutrition</li>
<li>Yoga</li>
<li>Mental Health</li>
<li>Dieting</li>
<li>Self Defense</li>
<li>Safety & First Aid</li>
<li>Dance</li>
<li>Meditation</li>
<li>Other</li>
</ul>
<li>Language
<ul>
<li class="dir">English</li>
<li class="dir">Spanish</li>
<li class="dir">German
<li>French</li>
<li>Japanese</li>
<li>Portuguese</li>
<li>Chinese</li>
<li>Russian</li>
<li>Latin</li>
<li>Arabic</li>
<li>Hebrew</li>
<li>Italian</li>
<li>Other</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments</li>
<li class="dir">Production</li>
<li class="dir">Music Fundamentals
<li>Vocal</li>
<li>Music Techniques</li>
<li>Music Software</li>
<li>Other</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science</li>
<li class="dir">Math & Science</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<!-- Course Introduction -->
<div id='course_intro'>
<div id='intro_title'>
Lifestyle Business: eBay Drop Shipping Guide Work from Home </div> <br>
<video src='one.mp4' poster='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='intro_video'controls></video>
</div>
<!-- End of Course Introduction -->
<!-- Course Facts -->
<div id='course_facts'>
<!-- Star Ratings -->
<span id='facts_ratings'> 400 Ratings </span>
<div class="Rating">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="1.73"></meter>
</div>
<!-- End of Star Ratings -->
<!-- Length -->
<span id='course_length'> Length <br> <span id='course_time'> 6 Weeks </span> </span>
<!-- End of Length -->
<!-- Skill Level -->
<span id='course_skillText'> Skill Level <br> <span id='course_skill'>
<!-- Skill Boxes -->
<div class='fillSquare'></div> <div class='fillSquare'></div> <div class='emptySquare'></div>
<!-- End of Skill Boxes -->
<span id='skill_level'> Intermediate </span>
</span> </span>
<!-- End of Skill Level -->
<!-- Wish List Button -->
<div id='course_wish'> <i class="fa fa-heart-o" aria-hidden="true" id='empty_heart'></i> <span id='course_wish_text'> Wish List </span> </div>
<!-- End of Wish List Button -->
</div>
<!-- End of Course Facts -->
<!-- Teacher Div -->
<div id='teacher_div'>
<a href='#'> <img src='https://cdnil1.fiverrcdn.com/photos/127528/original/ME2014_small.jpg?1381882191' id='teacher_picture'> </a>
<br> <br> <a href='#'> <div id='teacher_name'> Matthew Malan </div> </a>
<div id='teacher_tagLine'> Game Maker, Game Designer, Game Maker User and Teacher </div>
</div>
<!-- End of Teacher Div -->
Screenshot of leaked link content
In other words, if you hover over this particular section, there is a link. This is a mistake. I only want a link for the instructors name and their picture. How do I fix this error?
SIDE NOTE: For some reason, the Stack Overflow editor isn't rendering the "Skill Level" positioning and the positioning of the Wish List button correctly. These errors don't correlate in any way to the links leaking...

I made some edits to your css and the problem was fixed, but take care that when you want to centered element you should use text-align:center , not change their positions by left and right .
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */
/* courses.php */
/* course intro */
#course_body {
background: #F4F4F4;
}
#course_intro {
border: 1px solid #DDDDDD;
background: white;
width: 568px;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
padding: 20px 20px 10px 20px;
position: relative;
top: 40px;
left: 50px;
}
#intro_title {
width: 562px;
position: relative;
top: 2px;
}
#intro_video {
width: 375px;
height: 210px;
position: relative;
top: -7px;
}
/* end of course intro */
/* course facts */
#course_facts {
border: 1px solid #DDDDDD;
background: white;
width: 568px;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
padding: 20px 20px 10px 20px;
position: relative;
top: -311px;
left: 750px;
font-size: 20px;
height: 115px;
}
.Rating {
position: relative;
width: 125px;
height: 25px;
top: -5px;
}
.Rating svg {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: 0;
}
.Rating meter {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #B6C2CC;
}
.Rating meter::-moz-meter-bar {
background: #FF7867;
}
.Rating meter::-webkit-meter-optimum-value, .Rating meter::-webkit-meter-suboptimum-value, .Rating meter::-webkit-meter-even-less-good-value {
background: #FF7867;
}
#facts_ratings {
position: relative;
top: -6px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}
#course_length {
position: relative;
top: -57px;
left: 200px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}
#course_time {
letter-spacing: 0;
font-weight: bold;
font-size: 18px;
color: #2E3D49;
}
/* end of course facts */
/* skill level */
#course_skillText {
position: relative;
top: -84px;
left: 280px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}
.fillSquare, .emptySquare {
display: inline-block;
position: relative;
left: 80px;
}
.fillSquare {
width: 12px;
height: 12px;
background: #666;
}
.emptySquare {
width: 12px;
height: 12px;
background: #B8B8B8;
}
#skill_level {
position: relative;
left: 85px;
top: -2px;
font-size: 12px;
letter-spacing: 1px;
font-weight: normal;
color: #2E3D49;
}
/* end of skill level */
/* Wish List button */
#course_wish {
border: 1px solid #ccc;
border-radius: 3px;
font-size: 15px;
position: absolute;
width: 87px;
padding: 5px;
position: relative;
top: -65px;
cursor: pointer;
box-shadow: rgba(0,0,0,0.0980392) 0 2px 3px 0;
border-radius: 3px;
}
#empty_heart {
color: #FF827F;
}
#course_wish_text {
position: relative;
left: 5px;
}
/* End of Wish List button */
/* Teacher div */
#teacher_div {
width: 326px;
border: 1px solid #ddd;
background: white;
position: relative;
left: 1002px;
padding: 15px;
top: -280px;
text-align:center;
}
#teacher_picture {
width: 85px;
height: 85px;
border-radius: 50%;
}
#teacher_name {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
}
#teacher_div a {
text-decoration: none;
color: #00698C;
}
#teacher_div a:hover {
text-decoration: underline;
}
#teacher_tagLine {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #999;
text-align: center;
width: 325px;
}
/* End of Teacher div */
/* end of courses.php */
<?php
require "connect.php";
?>
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src='main.js'></script>
</head>
<body id='course_body'>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development</li>
<li>Mobile Apps</li>
<li>Programming Languages</li>
<li>Game Development</li>
<li>Databases</li>
<li>Software Testing</li>
<li>Software Engineering</li>
<li>Development Tools</li>
<li>E-Commerce</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance</li>
<li>Entrepreneurship</li>
<li>Communications</li>
<li>Management</li>
<li>Sales</li>
<li>Strategy</li>
<li>Operations</li>
<li>Project Management</li>
<li>Business Law</li>
<li>Data and Anylytics</li>
<li>Home Business</li>
<li>Human Resources</li>
<li>Industry</li>
<li>Media</li>
<li>Real Estate</li>
<li>Other</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification</li>
<li class="dir">Network & Security
<li>Hardware</li>
<li>Operating Systems</li>
<li>Other</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft</li>
<li class="dir">Apple
<li>Google</li>
<li>SAP</li>
<li>Intuit</li>
<li>Salesforce</li>
<li>Oracle</li>
<li>Other</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation</li>
<li class="dir">Productivity
<li>Leadership</li>
<li>Personal Finance</li>
<li>Career Development</li>
<li>Parenting & Relationships</li>
<li>Happiness</li>
<li>Religion & Spirituality</li>
<li>Personal Brand Building</li>
<li>Creativity</li>
<li>Influence</li>
<li>Self Esteem</li>
<li>Stress Management</li>
<li>Memory and Study Skills</li>
<li>Motivation</li>
<li>Other</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design</li>
<li class="dir">Graphic Design
<li>Design Tools</li>
<li>User Experience</li>
<li>Game Design</li>
<li>Design Thinking</li>
<li>3D & Animation</li>
<li>Fashion</li>
<li>Architectural Design</li>
<li>Interior Design</li>
<li>Other</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing</li>
<li>Branding</li>
<li>Marketing Fundamentals</li>
<li>Analystics & Automation</li>
<li>Public Relations</li>
<li>Advertising</li>
<li>Video & Mobile Marketing</li>
<li>Content Marketing</li>
<li>Non-Digital Marketing</li>
<li>Growth Hacking</li>
<li>Affiliate Marketing</li>
<li>Product Marketing</li>
<li>Other</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks</li>
<li class="dir">Arts & Crafts</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup</li>
<li>Travel</li>
<li>Gaming</li>
<li>Home Improvement</li>
<li>Pet Care & Training</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography</li>
<li class="dir">Photography Fundamentals</li>
<li class="dir">Portraits
<li>Landscape</li>
<li>Black & White</li>
<li>Photography Tools</li>
<li>Mobile Photography</li>
<li>Travel Photography</li>
<li>Commercial Photography</li>
<li>Wedding Photography</li>
<li>Video Design</li>
<li>Other</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness</li>
<li class="dir">General Health</li>
<li class="dir">Sports
<li>Nutrition</li>
<li>Yoga</li>
<li>Mental Health</li>
<li>Dieting</li>
<li>Self Defense</li>
<li>Safety & First Aid</li>
<li>Dance</li>
<li>Meditation</li>
<li>Other</li>
</ul>
<li>Language
<ul>
<li class="dir">English</li>
<li class="dir">Spanish</li>
<li class="dir">German
<li>French</li>
<li>Japanese</li>
<li>Portuguese</li>
<li>Chinese</li>
<li>Russian</li>
<li>Latin</li>
<li>Arabic</li>
<li>Hebrew</li>
<li>Italian</li>
<li>Other</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments</li>
<li class="dir">Production</li>
<li class="dir">Music Fundamentals
<li>Vocal</li>
<li>Music Techniques</li>
<li>Music Software</li>
<li>Other</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science</li>
<li class="dir">Math & Science</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<!-- Course Introduction -->
<div id='course_intro'>
<div id='intro_title'>
Lifestyle Business: eBay Drop Shipping Guide Work from Home </div> <br>
<video src='one.mp4' poster='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='intro_video'controls></video>
</div>
<!-- End of Course Introduction -->
<!-- Course Facts -->
<div id='course_facts'>
<!-- Star Ratings -->
<span id='facts_ratings'> 400 Ratings </span>
<div class="Rating">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="1.73"></meter>
</div>
<!-- End of Star Ratings -->
<!-- Length -->
<span id='course_length'> Length <br> <span id='course_time'> 6 Weeks </span> </span>
<!-- End of Length -->
<!-- Skill Level -->
<span id='course_skillText'> Skill Level <br> <span id='course_skill'>
<!-- Skill Boxes -->
<div class='fillSquare'></div> <div class='fillSquare'></div> <div class='emptySquare'></div>
<!-- End of Skill Boxes -->
<span id='skill_level'> Intermediate </span>
</span> </span>
<!-- End of Skill Level -->
<!-- Wish List Button -->
<div id='course_wish'> <i class="fa fa-heart-o" aria-hidden="true" id='empty_heart'></i> <span id='course_wish_text'> Wish List </span> </div>
<!-- End of Wish List Button -->
</div>
<!-- End of Course Facts -->
<!-- Teacher Div -->
<div id='teacher_div'>
<a href='#'> <img src='https://cdnil1.fiverrcdn.com/photos/127528/original/ME2014_small.jpg?1381882191' id='teacher_picture'> </a>
<a href='#'> <div id='teacher_name'> Matthew Malan </div> </a>
<div id='teacher_tagLine'> Game Maker, Game Designer, Game Maker User and Teacher </div>
</div>
<!-- End of Teacher Div -->
I removed all positions(top,left) from those elements #teacher_picture, #teacher_name and #teacher_tagLine
#teacher_picture {
width: 85px;
height: 85px;
border-radius: 50%;
position: relative;
//left: 120px;
//top: 3px;
}
#teacher_name {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
position: relative;
//top: -15px;
width: 325px;
}
#teacher_tagLine {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #999;
text-align: center;
width: 325px;
position: relative;
//top: -15px;
}
then I added text-aign:center to #teacher_div :
#teacher_div {
width: 326px;
border: 1px solid #ddd;
background: white;
position: relative;
left: 1002px;
padding: 15px;
top: -280px;
text-align:center;
}