How can I remove the white space below the "Brilliant" div - html

[Screenshot of white space under div]
[1]: https://i.stack.imgur.com/cO7TV.jpg
I can't work out why this white space is visible, I am a newbie to coding and would greatly appreciate any help possible. I have tried googling the answer but have had no luck!
body{ background: rgb(245,245,245); color: green; font-size: 25px; font-family: Helvetica; margin: 0; padding: 0; outline: none; border: 0; display: flex; } .card { font-weight: lighter; text-align: center; color: white; background: rgb(50, 50, 50); margin: 0; padding: 20px; }
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Luke's first project</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link href='https://fonts.googleapis.com/css?family=Bellota' rel='stylesheet'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid p-0">
<div class="row">
<div class="col">
<div id="banner">
<h1>Welcome to my first project</h1>
<p>This is where I will be learning new skills and putting them into practice!</p>
<p>
Start now
</p>
</div>
</div>
<div class="row no-gutters">
<div class="col">
<div class="card">
<h2>Awesome</h2>
<p>Thanks for visiting</p>
</div>
</div><div class="col">
<div class="card">
<h3>Brilliant</h3>
<p>Hope you're impressed</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="footer">
<p>Thank you for looking through my work and a special thanks to ©Le Wagon for teaching me!</p>
<ul class="list-inline">
<li class="list-inline-item"><i class="fab fa-youtube"></i></li>
<li class="list-inline-item"><i class="fab fa-facebook"></i></li>
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item"><i class="fab fa-github"></i></li>
</ul>
</div>
</div>
</div>
</div></div>
</body>
</html>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container-fluid bg-dark text-white">
<div class="row">
<div class="col-sm p-3 text-center">
<h3>Awesome</h3>
<p>Thanks for visiting</p>
</div>
<div class="col-sm p-3 text-center">
<h3>Brilliant</h3>
<p>Hope you're impressed</p>
</div>
</div>
</div>
You can use the piece of code above.
I hope my answer will help you.


I dont have all your code, but I think it is because you have an h2 tag in the first card-section and then a h3 in the next. Try and change to both h2 or h3 and see if the whitespace dissapears.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="row no-gutters">
<div class="col">
<div class="card">
<h3>Awesome</h3>
<p>Thanks for visiting</p>
</div>
</div>
<div class="col">
<div class="card">
<h3>Brilliant</h3>
<p>Hope you're impressed</p>
</div>
</div>
</div>

Related

Avoid contents from collapsing on Bootstrap 5 grid

Whats up friends, great friday for yous!
So I been rebuilding the website for the company I work to learn HTML+CSS.
Just doing a replica of the original website and its been going great.
So I am having some issues on the the footer right now, the items are mixing on smaller screens.
On the image below you can see (1) how it is and the desired result and (2) what is happening with me.
Here is my code:
.footer {
color: #fff;
height: 140px;
background: linear-gradient(180deg, #130936, #130936) no-repeat center;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 70%;
}
p, p a {
text-decoration:none;
color: hsla(0, 0%, 100%, 0.72);
letter-spacing: 0.3px;
font-size:14px;
}
.footer-brand {
width: 136px;
background: url(https://i.ibb.co/zbq2q4D/pngwing-com-1.png) left center no-repeat;
border: 0;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
i {
color: #fff;
font-size: 30px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<footer class="footer">
<div class="container-md h-100">
<div class="row align-items-center h-100 row-cols-4">
<div class="col-3"><img class="footer-brand" src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png" alt=""></div>
<div class="col-3">
<p class="p1">+44 (0) 700 677 1336</p>
<p>info#companyIwork.com</p>
</div>
<div class="col-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-3">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
I do appreciate your help.

I think what you're missing is the use of the responsiveness prefixes for the col class, when you declare col or col-x as a class it means that the class would automatically be with a fixed size in relation to the other grids, to overcome content overlapping you'll need to the prefixed to determine the screen size from which the content is being displayed upon i.e col-sm-x, col-md-x etc
Read more about bootstrap grid from here https://getbootstrap.com/docs/5.3/layout/grid/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css"
/>
</head>
<body>
<footer class="footer">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xs-12 col-md-3 text-center">
<img
class="footer-brand image-fluid"
src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png"
alt=""
style="width:80px"
/>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p class="p1">
+44 (0) 700 677 1336
</p>
<p>
info#companyIwork.com
</p>
</div>
<div class="col-xs-12 col-md-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
NOTE: The snippet above does not consider your stylesheet, so be cautious your stylesheet might override some bootstrap styles
SUGGESTION: Also consider reading bootstrap colors from https://getbootstrap.com/docs/5.0/utilities/colors/

How do I make my website look better on mobile devices?

I created a basic website to improve my front-end skills. I used Bootstrap 5 to make it responsive but it does not look good on the phone. Can somebody tell me what I did wrong? On my mobile device, it looks like this :
enter image description here
When I decreased the size of the browser, it looked good, but when I put it online on github, it looks like the page has been cut.
Html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ping</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/brands/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/regular/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/solid/" rel="stylesheet">
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</head>
<body style="overflow-x: hidden;">
<div class="row">
<div class="col d-flex justify-content-center pt-2">
<img src="./images/logo.svg">
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center flex-row pt-4">
<h1 class="text-muted font-weight-normal">We are launching<span class="text-black"> soon!</span></h1>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<span class="text-black">Subscribe and get notified</span>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center pt-5">
<div>
<form class="d-flex flex-row">
&nbsp<input class="form-control" id="email" placeholder="Your email adress...">&nbsp
<button type="button" id="submit">Submit</button>
</form>
<p class="container-fluid firstp"></p>
</div>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<img src="./images/illustration-dashboard.png" class="img.fluid imgdash">
</div>
</div>
<footer class="row">
<div class="col d-flex justify-content-center flex-row pt-5">
<i class="fab fa-facebook"></i>&nbsp&nbsp
<i class="fab fa-twitter"></i>&nbsp&nbsp
<i class="fab fa-instagram"></i>
</div>
<div class="container d-flex justify-content-center">
<p>© Copyright Ping. All rights reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</body>
</html>
css:
#email{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 330px;
height: 45px;
border-color: gainsboro;
}
#submit{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 150px;
height: 48px;
background-color: blue;
color: white;
border: none;
}
#submit:hover{
background-color: rgb(124, 111, 204);
}
.firstp{
padding-right: 55px;
}
.imgdash{
width: 100%;
max-width: 400px;
height: auto;
}

Add flex-wrap and justify-content-center class on form element, will resolve your issue. Also add mb-2 class on both input and button element.
Below code snippet also updated and i hope it'll resolve your issue. Thank You
#email {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 330px;
height: 45px;
border-color: gainsboro;
}
#submit {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
width: 150px;
height: 48px;
background-color: blue;
color: white;
border: none;
}
#submit:hover {
background-color: rgb(124, 111, 204);
}
.firstp {
padding-right: 55px;
}
.imgdash {
width: 100%;
max-width: 400px;
height: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ping</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/brands/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/regular/" rel="stylesheet">
<link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/solid/" rel="stylesheet">
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</head>
<body style="overflow-x: hidden;">
<div class="row">
<div class="col d-flex justify-content-center pt-2">
<img src="./images/logo.svg">
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center flex-row pt-4">
<h1 class="text-muted font-weight-normal">We are launching<span class="text-black"> soon!</span></h1>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<span class="text-black">Subscribe and get notified</span>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center pt-5">
<div>
<form class="d-flex flex-row flex-wrap justify-content-center">
&nbsp<input class="form-control mb-2" id="email" placeholder="Your email adress...">&nbsp
<button class="mb-2" type="button" id="submit">Submit</button>
</form>
<p class="container-fluid firstp"></p>
</div>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<img src="./images/illustration-dashboard.png" class="img.fluid imgdash">
</div>
</div>
<footer class="row">
<div class="col d-flex justify-content-center flex-row pt-5">
<i class="fab fa-facebook"></i>&nbsp&nbsp
<i class="fab fa-twitter"></i>&nbsp&nbsp
<i class="fab fa-instagram"></i>
</div>
<div class="container d-flex justify-content-center">
<p>© Copyright Ping. All rights reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</body>
</html>

What I can see is you are using a lot of .col . You need to specify .col for small and large devices. Otherwise some of it's function will break. Take a look at this link:
https://getbootstrap.com/docs/5.0/layout/columns/#column-breaks
You see in this link that there are many sm modifier used. Use them and you can see some results.

when changing the font size the text is misaligned

I have a text ("Bokdeko") that with a size of 20px is fine, but if I modify the font size to 30px it gets misaligned as you can see in the images:
with 20px: https://postimg.cc/75bSFGnR
with 30px: https://postimg.cc/0M1mKt1g
As you can see, the text "Bokdeko" appears scrolled down in the second image, which is the one with a font size of 30px.
this is the css and html code that I have.
the css file:
#import url(https://fonts.googleapis.com/css2?family=Oranienbaum&family=PT+Sans+Narrow&display=swap);
.icono
{
width:30px;
height:20px;
}
.nav-section .row {
height: 30px;
align-items: center;
}
.contenedor{
width:485px;
height:540px;/*tamaño alto foto*/
margin :auto;
}
.slick-prev:before, .slick-next:before {
color:black !important;
}
.titulo{
font-family: 'Oranienbaum', serif;
font-size: 30px;
}
the html file:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<LINK REL=StyleSheet HREF="css/bootstrap.css" TYPE="text/css">
<link rel="stylesheet" href="estilos_menu.css">
<link rel="stylesheet" href="estilos.css">
<style>
.icono
{
width:30px;/*tama�o del icono*/
height:20px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row nav-section" >
<div class="col-sm-12 col-lg-2 bg-secondary my-auto" style="z-index:3;">
<!--<div class="hamburguer">-->
<div class="row" style="margin-top:30px !important;margin-bottom:30px !important;">
<div class="col-4">
<div>
<ul class="nav">
<li><img class="icono" src="hamburguer.png">
<ul>
<li>Tienda
<ul>
<li>Ver todo</li>
<li>Armarios</li>
<li>Sillas</li>
<li>Sillones</li>
<li>Sofás</li>
<li>Mesas</li>
<li>Mesillas y cajoneras</li>
<li>Lámparas</li>
</ul>
</li>
<li>Blog
<ul>
<li>Estilo minimalista</li>
<li>Estilo nórdico</li>
<li>Estilo retro</li>
<li>Estilo rústico</li>
<li>Estilo clásico</li>
<li>Espacios exteriores</li>
<li>Fusión de estilos</li>
<!--</li>-->
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div> <!-- div col-->
<div class="col-8 titulo bg-info">
BOKDEKÓ
</div>
</div>
</div>
<div class="col-sm-10 col-lg-5 bg-danger my-auto" >
<div class="row" style="margin-top:30px !important;margin-bottom:30px !important;">
<div class="col-2">
Cuenta
</div>
<div class="col-2">
Registrarse
</div>
<div class="col-8">
Busca productos
<input type=text name=buscar size='12' maxlength='15' value='' style="padding-top:1px;padding-bottom:1px;font-size:9px;">
</div>
</div>
</div><!--div col-->
<div class="col-sm-12 col-lg-5 bg-info my-auto"><!--align-self-center-->
<div class="row" style="margin-top:30px !important;margin-bottom:30px !important;">
<div class="col-3 ">
Mi lista
</div>
<div class="col-3 bg-success">
Carrito
</div>
<div class="col-6 bg-warning">
Hola
</div>
</div>
</div> <!--div col-->
</div> <!--div row-->
</div>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/jquery-3.5.1.slim.min.js" type="text/javascript"></script>
<script src="js/utilidades.js" type="text/javascript"></script>
</body>
</html>

How to make card looking like this in Bootstrap 4?

It doesn't matter color and kind of icon. The main goal is big icon on the left and big text on the right side.

Please have a look
body{
margin-top:20px;
background:#FAFAFA;
}
.order-card {
color: #fff;
}
.bg-c-blue {
background: linear-gradient(45deg,#4099ff,#73b4ff);
}
.card {
border-radius: 5px;
-webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
border: none;
margin-bottom: 30px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card .card-block {
padding: 25px;
}
.order-card i {
font-size: 26px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 col-xl-3">
<div class="card bg-c-blue order-card">
<div class="card-block">
<h2 class="text-right"><i class="fa fa-cart-plus float-left"></i><span>486</span></h2>
</div>
</div>
</div>
</div>
</div>

Fiddle
<div class="card w-50">
<div class="card-body d-flex justify-content-between">
<div class="display-3 d-flex">
<i class="fa fa-cart-plus"></i>
</div>
<div class="d-flex flex-column">
<div class="h2 mb-0">+562</div>
<div class="h4 font-weight-lighter mb-0">Total sells</div>
</div>
</div>
</div>

Have a look on it1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.cart-box{max-width:500px;padding:15px;background:#e9f0f9;}
.cart-holder{padding:10px;color:#fff;background:#009dc6;}
.cart-holder .icon-holder{font-size:50px;}
.cart-holder .text-holder span{display: block;}
.cart-holder .items-counter{font-size:28px;font-weight:bold;}
.cart-holder .items-text{font-size:20px;}
</style>
</head>
<body>
<div class="cart-box">
<div class="cart-holder">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-6">
<div class="icon-holder">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
<div class="col-sm-6 col-6">
<div class="text-holder text-right">
<span class="items-counter">+562</span>
<span class="items-text">Today Sells</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Why does Bootstrap override my CSS definition for a non Bootstrap id?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<section class="sect-break" id="home-top-container">
<div class="cell-display">
<div class="title divInside"><h1>WELCOME!</h1></div>
<div class="divInside" id="tagline"><h2><i>tagline</i></h2></div>
<div class="divInside"><h1>WHAT?</h1></div>
<div class="divInside"><h2><p>Part 1
<p>Part 2
<p>Part 3</p></h2></div>
</div>
</section>
<section id="problem">
<div class="title"><h1>WHY?</h1></div>
<div class="container problem-top-level">
<div class="row">
<div class="col-xs-10 col-xs-offset-1 flex j-c-s-between a-i-center">
<div class="problem-container">
<div class="flex j-c-center a-i-center"><div class="problem-circle flex j-c-center a-i-center"><i class="fa fa-4x fa-group"></i></div></div>
<h3>Problem!</h3>
<p>Reason</p>
</div>
<div class="problem-container">
<div class="flex j-c-center a-i-center"><div class="problem-circle flex j-c-center a-i-center"><i class="fa fa-4x fa-ticket"></i></div></div>
<h3>Problem!</h3>
<p>Reason</p>
</div>
</div>
</div>
</div>
</section>
<section id="solution-header" class="sect-break flex a-i-center">
<div class="m-l-lg title"><h1>Solution</h1></div>
</section>
<section id="solution">
<div class="container problem-top-level">
<div class="row">
<div class="col-xs-10 col-xs-offset-1 flex j-c-s-between a-i-center">
<div class="problem-container">
<div class="flex j-c-center a-i-center"><div class="solution-circle flex j-c-center a-i-center"><i class="fa fa-4x fa-glass"></i></div></div>
<h3>Solution</h3>
<p>Reason</p>
</div>
<div class="problem-container">
<div class="flex j-c-center a-i-center"><div class="solution-circle flex j-c-center a-i-center"><i class="fa fa-4x fa-home"></i></div></div>
<h3>Solution</h3>
<p>Reason</p>
</div>
<div class="problem-container">
<div class="flex j-c-center a-i-center"><div class="solution-circle flex j-c-center a-i-center"><i class="fa fa-4x fa-percent"></i></div></div>
<h3>Solution</h3>
<p>Reason</p>
</div>
</div>
</div>
</section>
<section id="contact" class="sect-break">
<h1>Interested? Contact us</h1>
</section>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
This is my head in my HTML and when I inspect the page with Chrome's inspection tools, I see <style> tags that hold most of my CSS, but the id I have modified to height: 100vh and in the <style> tags, it's height: 300px. I cannot for the life of me figure out where this is coming from and what is overriding me. Any ideas?
This is how I define #problem in app.css:
#problem {
background-color: #0eaca7;
height: 100vh;
}
And I do not have any inline <style> tags at all. When the page is loaded client-side, <style> tags appear in the head, perhaps generated by loading the CSS stylesheets? I'm new to web dev so I'm not actually sure where they come from.
This is what Chrome shows in inspection:

You need to use a selector with a higher specificity.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Like this:
body > section#problem {
background-color: #0eaca7;
height: 100vh;
}