Paragraph text not showing on page - html

Question

I'm pretty new to web development, and I decided to recreate a few sites without looking at their source for practice (before I design and code them myself). Everything was going well until I added <p> tags inside my divs.
Things I've tried: z-index, using spans instead, rebooting my PC, closing my browser, using another browser. It's probably a noob mistake, and possibly a duplicate. If it is a duplicate, I'd appreciate you linking me to the other question rather than closing it without context. I've already tried searching for it, and I can't find any results.
Problem:
<div id="below-headbar">
<div id="cloud-based">
<img src="images/cloud-based.png">
<h1>CLOUD BASED</h1>
<p>Productimize comes with the unlimited cloud hosting space for your customizer. Whenever we release a new version of our product you get the new features with all the benefits at zero cost.</p>
</div>
<div id="dynamic-pricing">
<img src="images/dynamic-pricing.png">
<h1>DYNAMIC PRICING</h1>
<p>For each and every customizable part of the product, pricing can be fixed accordingly. Regardless of the eCommerce platform (Shopify, BigCommerce, or Magento), the dynamic pricing can be applied.</p>
</div>
<div id="print-ready">
<img src="images/print-ready.png">
<h1>PRINT READY</h1>
<p>Our customization engine captures all the design details given by customers. Customized design can be exported to print ready files in PDF, PNG, EPS and TIF formats. This way the whole order flow can be automated seamlessly.</p>
</div>
</div>
This is the HTML that I'm trying to get work. Everything inside it works, except for the text inside of the paragraph tags. As I said, I've already tried a few things. Here's the CSS that applies to it:
#below-headbar div p {
font-family:'Roboto', sans-serif;
font-weight:400;
line-height:27px;
color:#333;
width:350px;
height:250px;
margin:auto;
}
Any help/troubleshooting is appreciated. Here's the JSFiddle (Entire website so far, as I said, it's a copy of another website for practice):
https://jsfiddle.net/puvnw3a1/2/
The website looks a bit ugly without the images, but don't worry about that. Again, it's probably some beginner mistake. Thanks.

Answer 1

A quick look at your jsfiddle it says that your p tag has a font size of 0.
try:
#below-headbar div p {
font-family:'Roboto', sans-serif;
font-weight:400;
line-height:27px;
color:#333;
width:350px;
height:250px;
margin:auto;
text-align:center;
font-size: 16px;
}

Answer 2

Similar to what Awad said in his comment, I would suggest setting the font-size property in your css for #below-headbar div p so that it doesn't inherit the size from any other elements.

Answer 3

Remove font-size: 0; from #below-headbar, updated example:
#import url('https://fonts.googleapis.com/css?family=Montserrat');
#import url('https://fonts.googleapis.com/css?family=Roboto');
* {
margin:0;
}
html,body {
width:100%;
height:100%;
font-family: 'Roboto', sans-serif;
}
#font-face {
font-family:'Montserrat-Bold';
src:url("../fonts/Montserrat-Bold.ttf");
}
#wrapper {
width:1920px;
height:6000px;
margin:auto;
}
#logo-wrapper {
margin-top:30px;
margin-left:95px;
}
#headset-section {
width:100%;
height:830px;
}
#info-and-colors-wrapper {
width:950px;
height:100%;
}
#customize-info {
width:700px;
height:360px;
margin-left:95px;
margin-top:240px;
display:inline-block;
line-height:3rem;
}
#customize-info h1 {
text-transform:uppercase;
font-weight:300;
color:rgb(52,52,52);
color:#333;
font-family: 'Montserrat', sans-serif;
}
#customize-info h1 span {
display:block;
font-weight:700;
font-size:34px;
color:#333;
}
#customize-info p {
margin-top:20px;
font-size:26px;
color:rgb(102,102,102);
width:550px;
line-height:2.8rem;
}
#getstarted {
text-transform:uppercase;
font-weight:600;
color:white;
width:121px;
background-color:rgb(58,204,129);
height:46px;
text-align:center;
border-radius:4px;
margin-top:20px;
font-size:15px;
border:2px solid rgb(58,204,129);
cursor:pointer;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#getstarted:hover {
background-color:white;
color:rgb(58,204,129);
}
#headset-colors {
height:300px;
width:50px;
margin-left:850px;
margin-top:-250px;
}
.headset-color {
height:40px;
width:40px;
display:inline-block;
border-radius:50%;
margin-bottom:20px;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
}
.headset-color:hover {
height:70px;
width:70px;
display:inline-block;
border-radius:50%;
margin-left:-15px;
cursor:pointer;
}
#red {
background-color:rgb(111,7,31);
}
#red:hover {
margin-top:-20px;
margin-bottom:10px;
box-shadow: 3px 3px 5px 3px rgba(101,5,21,.2);
}
#yellow {
background-color:rgb(237,202,37);
}
#yellow:hover {
margin-top:-15px;
margin-bottom:5px;
box-shadow: 3px 3px 5px 3px rgba(227,192,27,.3);
}
#orange {
background-color:rgb(251,144,63);
}
#orange:hover {
margin-top:-15px;
margin-bottom:5px;
box-shadow: 3px 3px 5px 3px rgba(241,134,53,.2);
}
#blue {
background-color:rgb(12,184,150);
}
#blue:hover {
margin-top:-15px;
box-shadow: 3px 3px 5px 3px rgb(2,174,140,.2);
}
#headset {
margin-left:1372px;
margin-top:-488px;
}
#headbar {
height:70px;
width:1920px;
display:flex;
vertical-align:center;
background-color:rgb(253, 251, 251);
border-bottom:1px solid rgb(226,226,226);
}
#headbar ul {
display:flex;
list-style-type:none;
width:400px;
margin:auto;
margin-right:-30px;
margin-top:25px;
}
#headbar ul li {
margin-right:45px;
box-shadow: 0px 3px 0px 0px rgb(253, 251, 251);
transition:300ms all;
border-bottom:10px solid rgb(253,251,251);
cursor:pointer;
}
#headbar ul li:hover {
box-shadow: 0px 3px 0px 0px rgb(58,204,129);
margin-bottom:-16px;
}
#request {
display:inline-block;
width:130px;
height:40px;
border-radius:10px;
background-color:rgb(58,204,129);
color:white;
margin-right:710px;
margin-top:15px;
line-height:40px;
text-align:center;
border:1px solid rgb(58,204,129);
transition:200ms all;
cursor:pointer;
}
#request:hover {
background-color:white;
color:rgb(58,204,129);
}
#below-headbar {
width:1260px;
height:400px;
margin:auto;
margin-top:100px;
/* comment out this style */
/* font-size:0; */
text-align:center;
}
#below-headbar div img {
width:130px;
height:auto;
display:block;
margin:auto;
}
#below-headbar div h1 {
font-size:26px;
color:#333;
font-weight:300;
font-family:'Montserrat-Bold';
width:250px;
margin-left:90px;
}
#below-headbar div p {
font-family:'Roboto', sans-serif;
font-weight:400;
line-height:27px;
color:#333;
width:350px;
height:250px;
margin:auto;
text-align:center;
}
#cloud-based, #dynamic-pricing, #print-ready {
width:420px;
height:400px;
display:inline-block;
color:black;
font-family:'Montserrat', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Productimize</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="logo-wrapper">
<img src="images/logo.png" width="265px" height="40px">
</div>
<div id="headset-section">
<div id="info-and-colors-wrapper">
<div id="customize-info">
<h1>
Product
<span>Customization</span>
Made Easy
</h1>
<p>
Start selling customized products and skyrocket your conversion rate.
</p>
<div id="getstarted">Get Started</div>
</div>
<div id="headset-colors">
<div id="red" class="headset-color" onclick="change("red")"></div>
<div id="yellow" class="headset-color" onclick="change("yellow")"></div>
<div id="orange" class="headset-color" onclick="change("orange")"></div>
<div id="blue" class="headset-color" onclick="change("blue")"></div>
</div>
<div id="headset">
<img src="images/redheadset.png">
</div>
</div>
</div>
<div id="headbar">
<ul>
<li>Portfolio</li>
<li>Pricing</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div id="request">Request a Demo</div>
</div>
<div id="below-headbar">
<div id="cloud-based">
<img src="images/cloud-based.png">
<h1>CLOUD BASED</h1>
<p>Productimize comes with the unlimited cloud hosting space for your customizer. Whenever we release a new version of our product you get the new features with all the benefits at zero cost.</p>
</div>
<div id="dynamic-pricing">
<img src="images/dynamic-pricing.png">
<h1>DYNAMIC PRICING</h1>
<p>For each and every customizable part of the product, pricing can be fixed accordingly. Regardless of the eCommerce platform (Shopify, BigCommerce, or Magento), the dynamic pricing can be applied.</p>
</div>
<div id="print-ready">
<img src="images/print-ready.png">
<h1>PRINT READY</h1>
<p>Our customization engine captures all the design details given by customers. Customized design can be exported to print ready files in PDF, PNG, EPS and TIF formats. This way the whole order flow can be automated seamlessly.</p>
</div>
</div>
</div>
</body>
<script>
hset = document.getElementById("headset");
function change(color) {
hset.innerHTML = "<img src=\"images/" + color + "headset.png\">";
}
</script>
</html>