Footer appears next to section instead of below - html

This is how the website should look like:
https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/index.html
However the bottom sections appear next to each other rather than below. Here is the code:
(HTML)
http://pastie.org/10325555
(CSS)
http://pastie.org/10325550


Just a few tweaks! Here's my fiddle
.container {
max-width: 928px;
position: relative;
display: block;
!important
}
h1,
h2,
p,
a {
font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
}
h1 {
font-size: 64px;
font-weight: 100;
margin-bottom: 20px;
}
a {
font-size: 18px;
font-weight: 200;
}
.btn:link {
background-color: rgba(238, 68, 95, 0.9);
color: white;
text-decoration: none;
}
a:active {
background-color: rgba(238, 68, 95, 0.9);
color: white;
text-decoration: none;
}
a:hover {
background-color: rgba(238, 68, 95, 0.9);
color: white;
text-decoration: none;
}
a:visited {
background-color: rgba(238, 68, 95, 0.9);
color: white;
text-decoration: none;
}
#main {
background: url("https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg") no-repeat center center;
background-size: cover;
height: 550px;
}
.main p {
font-size: 26px;
font-weight: 200;
margin-bottom: 40px;
}
section .row {
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #dbdbdb;
}
.section h2 {
font-size: 50px;
}
.store {
text-align: center;
border-bottom: 0px;
padding-bottom: 0px
}
footer {
position: relative;
display: block!important;
border-top: 1px solid #dbdbdb;
background-color: #f3f3f3;
padding: 20px 0px 80px;
}
.footer ul {
list-style-type: none;
padding-left: 0;
}
.footer li {
color: #999;
font-weight: 600;
}
#media (max-width: 500px) {
.col-md-6 img {
padding: 50px;
width: 100%;
}
}
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<body>
<div id="main">
<div class="container">
<h2>Heading</h2>
<p>Paragraph Text</p> <a class="btn" href="#">Download Shutterbug</a>
</div>
</div>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png">
</div>
<div class="col-md-6">
<h2>Heading</h2>
<p>Paragraph</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png">
</div>
<div class="col-md-6">
<h2>Heading</h2>
<p>Text Text Text Text Text</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/save.png">
</div>
<div class="col-md-6">
<h2>Heading<h3>
<p>Text Text Text</p>
<div>
</div>
<div class="store">
<div class="container">
<h2>Available for iPhone, iPad, and Android.</h2>
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="185px" />
<img alt="Get it on Google Play" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="159px" />
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Company</h2>
<ul>
<li>Careers</li>
<li>Terms</li>
<li>Help</li>
</ul>
</div>
<div class="col-md-4">
<h2>Products</h2>
<ul>
<li>Shutterbugg</li>
<li>Speakerboxx</li>
</ul>
</div>
<div class="col-md-4">
<h2>News</h2>
<ul>
<li>Blog</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Myspace</li>
</ul>
</div>
</div>
</div>
</footer>
</body>


You need to clean the padding-bottom of your class footer.
.footer {
border-top: 1px solid #dbdbdb;
background-color: #f3f3f3;
padding: 20px 0px 80px;
padding-bottom: 0px;
}
I hope of it helps you.

Related

How can I get one flex element to take the width of another?

Thank you again for your help with review my code and give some advice that I can use to move forward.
I am having trouble figuring out how to expand the services section below to inherit the hero section width. The image below display how the website looks right but the next image will show what the concept will look like.
CSS CODE
.navbar {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
border-left: 1px solid #181024;
border-right: 1px solid #181024;
border-bottom: 1px solid #181024;
background-color: #FAFAFA;
}
.nav {
display: flex;
}
.logo {
padding: 2em;
font-size: 1.2rem;
}
.site-nav-list {
padding: 2em;
}
.site-nav-list li {
padding-left: 65px;
}
.site-nav-list li a {
font-size: 1em;
}
.button {
width: 300px;
height: 100%;
background-color: #181024;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
color: white;
font-size: 0.9rem;
padding: 2em;
}
.button a {
color: #FFFFFF;
letter-spacing: 1%;
text-decoration: none;
}
.site-title {
position: fixed;
width: 100%;
}
.site-nav-list {
display: flex;
}
li {
list-style: none;
font-size: 1.2rem;
}
a {
text-decoration: none;
}
section {
display: flex;
}
h1 {
font-size: 5.5vw;
}
button {
border: none;
cursor: pointer;
}
.hero_services {
display: flex;
}
.hero_lists {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center
}
.hero_lists>.hero_content {
flex: 1 1 21%;
}
.hero_content {
padding: 1.4em;
font-size: 1vw;
height: 20vh;
border: 1px solid #181024;
background-color: #FAFAFA;
}
.hero_top-right {
display: flex;
flex-direction: column;
justify-content: center;
border-left: 1px solid #181024;
background-color: #FAFAFA;
padding: 5.16em;
}
.hero_top-left {
background-color: #E7DDF8;
border-left: 1px solid #181024;
height: 90vh;
}
.button_info {
margin-top: 3em;
text-transform: uppercase;
text-decoration: underline;
font-size: 1.3em;
}
.button_info button {
background-color: #181024;
text-transform: uppercase;
font-weight: bold;
font-size: 0.8em;
color: white;
padding: 1.3em 3em;
margin-right: 20px;
}
.hero_email {
background-color: #E7DDF8;
align-items: flex-end;
width: 100%;
}
input {
padding: 24px;
}
<div class="hero">
<section>
<div class="hero_top-right">
<h1>Bring your minority B2B business ideas to life with our services.</h1>
<div class="button_info">
<a href="#">
<button type="button" name="button">
Speak With A Perceptor
</button>
</a>
<a href="#">
Accelerate Program
</a>
</div>
</div>
<div class="hero_top-left">
<img src="{{ site.data.teams.team.ImgWorkHC }}" alt="Hunt For Careers Perview">
</div>
</section>
</div>
<div class="hero_services">
<div class="hero_lists">
<div class="hero_content">
<h3>test words</h3>
<p>test words</p>
<a href="">
<p>Learn More</p>
</a>
</div>
<div class="hero_content">
<h3>test words</h3>
<p>test words</p>
<a href="">
<p>Learn More</p>
</a>
</div>
<div class="hero_content">
<h3>test words</h3>
<p>test words</p>
<a href="">
<p>Learn More</p>
</a>
</div>
<div class="hero_content">
<h3>test words</h3>
<p>test words</p>
<a href="">
<p>Learn More</p>
</a>
</div>
<div class="hero_content">
<h3>test words</h3>
<p>test words</p>
<a href="">
<p>Learn More</p>
</a>
</div>
<div class="hero_content">
<h3>test words</h3>
<p>test words</p>
<a href="">
<p>Learn More</p>
</a>
</div>
</div>
<div class="hero_email">
<form class="" action="" method="">
<input type="email" name="email" placeholder="Email Address">
<button type="button" name="button">Send</button>
</form>
</div>
</div>

Here is one example of how you could structure your HTML for using flexbox.
Note I have stuck with using flex rows as the default, but as #isherwood has mentioned in his comment above, you can also use flex columns or a combination of both. Either way will work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #222;
}
.container {
height: 100vh;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 10%;
padding: 0 50px;
border: 1px solid black;
}
.nav__list {
display: flex;
gap: 50px;
}
.nav__item {
list-style: none;
}
a:link {
text-decoration: none;
color: inherit;
}
.flex__container-main {
display: flex;
height: 90%;
border: 1px solid black;
}
.flex__container-left {
width: 70%;
height: 50%;
}
.flex__container-right {
width: 30%;
height: 100%;
}
.top__container {
height: 100%;
border: 1px solid black;
}
.bottom__container {
height: 100%;
border: 1px solid black;
}
.top__aside {
border: 1px solid black;
height: 90%;
}
.bottom__aside {
border: 1px solid black;
height: 10%;
}
.top__row {
display: flex;
height: 50%;
}
.bottom__row {
display: flex;
height: 50%;
}
.card {
border: 1px solid black;
width: 33.33%;
/*
4 cards per row would mean using
width: 25%;
*/
}
<body>
<div class="container">
<nav class="nav">
<!-- <img src="" alt=""> -->
<span>LOGO HERE</span>
<ul class="nav__list">
<li class="nav__item">Link 1</li>
<li class="nav__item">Link 2</li>
<li class="nav__item">Link 3</li>
<li class="nav__item">Link 4</li>
</ul>
</nav>
<div class="flex__container-main">
<div class="flex__container-left">
<div class="top__container">
<h1>TOP LEFT</h1>
</div>
<div class="bottom__container">
<div class="top__row">
<div class="card">
<h2>CARD</h2>
</div>
<div class="card">
<h2>CARD</h2>
</div>
<div class="card">
<h2>CARD</h2>
</div>
</div>
<div class="bottom__row">
<div class="card">
<h2>CARD</h2>
</div>
<div class="card">
<h2>CARD</h2>
</div>
<div class="card">
<h2>CARD</h2>
</div>
</div>
</div>
</div>
<div class="flex__container-right">
<div class="top__aside">
<h3>TOP ASIDE</h3>
</div>
<div class="bottom__aside">
<h3>BOTTOM ASIDE</h3>
</div>
</div>
</div>
</div>
</body>

How can I fill out the space with a div tag in CSS? (Images included)

I am a newbie, when it comes to learning HTML and CSS for myself and have been playing around with coding under the guidance of several videos. Obviously, I have to deal with knowledge gaps, by doing it this way.
Anyway, I have "designed" a CSS Layout from my head, so to help me push further in the process of learning. Here is the image, how I would like it to have Image Layout
The Output of the code looks like this: Result
I have been trying to figure out, how I can align a div below the header div on the left and right side, to completely fill out the black spaces.
And my code below:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: blue;
margin: 0;
padding: 0;
width: 100%;
background-color: black;
background-size: cover;
background-repeat: no-repeat;
}
.Header {
height: 191px;
background: #808080;
border: 1px solid #000000;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
.contentwrap {
width: 1025px;
margin: 0 auto;
}
.container {
background: #808080;
border: 1px solid #000000;
height: 190px;
}
.footer {
background: #808080;
border: 1px solid #000000;
height: 129px;
}
<div class="Header">
<h1> Header </h1>
</div>
<div class="contentwrap">
<div class="container">
<p> Text </p>
</div>
<div class="container">
<p> Text </p>
</div>
<div class="container">
<p> text </p>
</div>
<div class="container">
<p> text </p>
</div>
<div class="footer">
<p> footer </p>
</div>
</div>

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: blue;
margin: 0;
padding: 0;
background-color: black;
}
.Header {
height: 191px;
background: #808080;
border: 1px solid #000000;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
.content {
display: flex;
}
.content__sidebar {
width: 200px;
min-height: 100%;
}
.content__sidebar--left {
background-color: red;
}
.content__sidebar--right {
background-color: green;
}
.content__main {
flex: 1;
}
.container {
background: #808080;
border: 1px solid #000000;
height: 190px;
}
.footer {
background: #808080;
border: 1px solid #000000;
height: 129px;
}
<div class="Header">
<h1> Header </h1>
</div>
<div class="content">
<div class="content__sidebar content__sidebar--left"></div>
<div class="content__main">
<div class="container">"
<p> Text </p>
</div>
<div class="container">
<p> Text </p>
</div>
<div class="container">
<p> text </p>
</div>
<div class="container">
<p> text </p>
</div>
</div>
<div class="content__sidebar content__sidebar--right"></div>
</div>
<div class="footer">
<p> footer </p>
</div>

Ugly way: https://codepen.io/stefantigro/pen/bGdZyeX
<div class="Header">
<h1> Header </h1>
</div>
<div class="">
<div class="right-side side">
</div>
<div class="middle">
<div class="container">
<p> Text </p>
</div>
<div class="container">
<p> Text </p>
</div>
<div class="container">
<p> text </p>
</div>
<div class="container">
<p> text </p>
</div>
<div class="footer">
<p> footer </p>
</div>
</div>
<div class="left-side side">
</div>
</div>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: blue;
margin: 0;
padding: 0;
width: 100%;
background-color: black;
background-size: cover;
background-repeat: no-repeat;
}
.Header {
height: 191px;
background: #808080;
border: 1px solid #000000;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
.contentwrap {
margin: 0 auto;
}
.container {
background: #808080;
border: 1px solid #000000;
height: 190px;
display: block;
}
.footer {
background: #808080;
border: 1px solid #000000;
height: 129px;
}
.middle
{
display: inline-block;
width: 60%;
height: 100%;
}
.right-side{
background: blue;
}
.left-side{
background: red;
}
.side{
margin: 0;
width: 19%;
height: 800px;
display: inline-block;
}
Problem here was we are using set dimensions and well size varies especially from monitor to monitor. I would suggest looking into a grid system like bootstrap's or https://960.gs/

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

CSS Text scale on hover will not occure

I have this website with a nav bar. at the moment the nav text (theory, More) gets bold the on hover, however i have been trying to make the text scale/grow in a smooth transition as it hovers. But the text only seems to bolden at the moment and i cannot get the text to scale up
may someone look over my code and note my mistake
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="Developer" content="Alejandro Muratalla / ElitePower">
<title>Power Training | Home</title>
<style>
body{
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
nav{
float: right;
margin-top: 10px;
}
/* Header */
header{
background: #0D98BA;
color: #FFD700;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF4500 3px solid;
}
#a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: all .1s ease-in-out
}
header ul{
margin: 0;
padding: 0;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding{
float: left;
}
header #branding h1{
margin: 0;
}
header .highlight, header .current a{
color: #000000;
font-weight: bold;
}
#a:hover{
font-weight: bold;
transform: scale(1.5);
}
/* Showcase */
#showcase{
min-height: 400px;
}
</style>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="images" style="max-width:500px">
<img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>

<a>'s default display is inline. transform cannot be applied unless display is reset to value which allow sizing. (or formatting context). You can reset it to inline-block.
body {
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
float: right;
margin-top: 10px;
}
/* Header */
header {
background: #0d98ba;
color: #ffd700;
padding-top: 30px;
min-height: 70px;
border-bottom: #ff4500 3px solid;
}
.a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: all 0.1s ease-in-out;
display:inline-block;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: #000000;
font-weight: bold;
display: inline-block;
}
.a:hover {
font-weight: bold;
transform: scale(1.5);
}
/* Showcase */
#showcase {
min-height: 400px;
}
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="images" style="max-width:500px">
<img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
Note: I turned the three id="a" into class="a"

Correct way to animate div resize with text in it

What is the correct way of resizing divs with text in it? I use the code below, but it leaves me with noticeable font distortion when resizing. Its kinda like the font has changed during animation. Also there is a flicker inside the circles. The effect isn't really visible on OSX, but it is on windows machines. How do I fix it?
.content-no-btn {
transition: all .2s ease-in-out;
}
.content-no-btn:hover {
transform: scale(1.05);
}
.entry-content {
border-style: solid;
border-color: #bbb;
border-width: 0px 3px 3px 3px;
padding-top: 20px;
}
#price {
text-align: center;
}
.plan {
display: inline-block;
margin: 10px 1%;
font-family: 'Lato', Arial, sans-serif;
}
.plan-inner {
background: #fff;
margin: 0 auto;
min-width: 280px;
max-width: 100%;
position: relative;
}
.entry-title {
background: #53CFE9;
height: 140px;
position: relative;
text-align: center;
color: #fff;
margin-bottom: 0px;
}
.entry-title>h3 {
background: #20BADA;
font-size: 20px;
padding: 5px 0;
text-transform: uppercase;
font-weight: 700;
margin: 0;
}
.entry-title .price {
position: absolute;
bottom: -25px;
background: #20BADA;
height: 95px;
width: 95px;
margin: 0 auto;
left: 0;
right: 0;
overflow: hidden;
border-radius: 50px;
border: 4px solid #fff;
line-height: 80px;
font-size: 23px;
font-weight: 700;
}
.price span {
position: absolute;
font-size: 8px;
bottom: -10px;
left: 30px;
font-weight: 400;
}
.entry-content {
color: #323232;
padding-top: 20px;
}
.entry-content ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.entry-content li {
border-bottom: 1px solid #E5E5E5;
padding: 10px 0;
}
.entry-content li:last-child {
border: none;
}
.btn {
padding: 5em 0 5em 0;
text-align: center;
}
.btn a {
background: #323232;
padding: 10px 30px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
text-decoration: none
}
.hot {
position: absolute;
top: -7px;
background: #F80;
color: #fff;
text-transform: uppercase;
z-index: 2;
padding: 2px 5px;
font-size: 9px;
border-radius: 2px;
right: 10px;
font-weight: 700;
}
.basic .entry-title {
background: #f37920;
}
.basic .entry-title > h3 {
background: #E7680C;
}
.basic .price {
background: #f37920;
}
.standard .entry-title {
background: #4484c1;
}
.standard .entry-title > h3 {
background: #3772aa;
}
.standard .price {
background: #3772aa;
}
.ultimite .entry-title > h3 {
background: #DD4B5E;
}
.ultimite .entry-title {
background: #F75C70;
}
.ultimite .price {
background: #DD4B5E;
}
.gratitude {
padding: 5em 20px 5em 20px;
height: 300px;
text-align: center;
background-color: #f8f9f9;
}
.orderDetailsContent {
max-width: 800px;
text-align: center;
display: table;
position: relative;
margin: auto;
}
<div id="price">
<!--price tab-->
<div class="plan">
<div class="plan-inner">
<div class="content-no-btn">
<div class="entry-title first-entry-title">
<h3>WHATUP </h3>
<div class="price">$0.99<span></span>
</div>
</div>
<div class="entry-content first-entry-content">
<ul>
<li><strong>SOME text here</strong></li>
<li><strong>and here too</strong> really</li>
<li><strong>and here too</strong> Effective</li>
<li><strong>HEHE</strong> and here too</li>
</ul>
</div>
</div>
<div class="btn">
Order Now
</div>
</div>
</div>
<!-- end of price tab-->
<!--price tab-->
<div class="plan basic">
<div class="plan-inner">
<div class="content-no-btn">
<div class="entry-title">
<h3>YEAH </h3>
<div class="price">$1.99<span></span>
</div>
</div>
<div class="entry-content">
<ul>
<li><strong>SOME text here</strong></li>
<li><strong>and here too</strong> really</li>
<li><strong>and here too</strong> Effective</li>
<li><strong>HEHE</strong> and here too</li>
</ul>
</div>
</div>
<div class="btn">
Order Now
</div>
</div>
</div>
<!-- end of price tab-->
<!--price tab-->
<div class="plan standard">
<div class="plan-inner">
<div class="content-no-btn">
<div class="hot">hot</div>
<div class="entry-title">
<h3>Superduper</h3>
<div class="price">$2.99<span></span>
</div>
</div>
<div class="entry-content">
<ul>
<li><strong>SOME text here</strong></li>
<li><strong>and here too</strong> really</li>
<li><strong>and here too</strong> Effective</li>
<li><strong>HEHE</strong> and here too</li>
</ul>
</div>
</div>
<div class="btn">
Order Now
</div>
</div>
</div>
<!-- end of price tab-->
<!--price tab-->
<div class="plan ultimite">
<div class="plan-inner">
<div class="content-no-btn">
<div class="entry-title">
<h3>JustGreat</h3>
<div class="price">$3.99<span></span>
</div>
</div>
<div class="entry-content">
<ul>
<li><strong>SOME text here</strong></li>
<li><strong>and here too</strong> really</li>
<li><strong>and here too</strong> Effective</li>
<li><strong>HEHE</strong> and here too</li>
</ul>
</div>
</div>
<div class="btn">
Order Now
</div>
</div>
</div>
<!-- end of price tab-->
</div>
<div class="gratitude"></div>

Scale transformations of such a small percentage are notorious for this. The only way around it is better browsers.
Instead, consider a translate animation with a whole number of pixels, perhaps upwards. You can also get some scale effect by setting position:relative on .content-no-btn then adding an absolutely positioned ::before with 100% width and height, and scaling only that pseudo-element on hover.