I have a very simple webpage that I'm working on and it looks fine on Chrome but when I open it it with Firefox it displays the page in a weird way. I'm using Bootstrap with some custom CSS. Does anyone know why this is? Here is my code (the page has more rows but I cut some so it wouldn't be too long).
HTML:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Search For Recipes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="food.js"></script>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="example.css">
</head>
<body>
<div class="container">
<div class="row" id="title">
<div class="col d-flex justify-content-center">
<h1>Search for Recipes by Ingredients or by Dish</h1>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<img src="./images/fork.png" alt="Fork and knife">
</div>
</div>
<div id="form-container">
<form>
<label class="visuallyhidden" for="ingredients">Separate Ingredients by Comma (chicken, rice,
carrots)</label>
<input type="text" id="ingredients" name="ingredients"
placeholder="Separate Ingredients by Comma (chicken, rice, carrots)...">
</form>
<label class="visuallyhidden" for="recipe_choice">Choose by Ingredients or by Dish</label>
<select id="recipe_choice">
<option value="by_ingredient">By Ingredients</option>
<option value="by_dish">By Dish</option>
</select>
</div>
<div class="row">
<div class="col-5"></div>
<button id="button" class="col-2" onclick="returnResult()">Search</button>
<div class="col-5"></div>
</div>
<div class="row" id="subtitle" style="display: none;">
<div class="col d-flex justify-content-center">
<h2>What Are you Hungry For?</h2>
</div>
</div>
<div id="loading" style="display: none;">
<div class="spinner-border"></div>
<h1>Analyzing Taste Buds...</h1>
</div>
<div class="row" id="error" style="display: none;">
<div class="col d-flex justify-content-center">
<h2>Oops Something Went Wrong :/ Please Try Again </h2>
</div>
</div>
<div id="recipe-grid" class="container" style="display: grid;">
<div class="row" id="row1">
<div id="recipe1" class="recipe-container col-md"><img class="img-fluid"
src="https://spoonacular.com/recipeImages/1003525-556x370.jpg"><br>
<div class="recipe_link"><a href="https://thewoksoflife.com/2018/05/dace-fish-black-beans-rice/">One
Pot Rice Cooker Rice with Dace Fish</a></div>
<p id="recipe_info1">One Pot Rice Cooker Rice with Dace Fish is a <b>gluten free, dairy free, and
pescatarian</b> main course. For <b>$1.26 per serving</b>, this recipe <b>covers 16%</b> of
your daily requirements of vitamins and minerals. One portion of this dish contains roughly
<b>17g of protein</b>, <b>2g of fat</b>, and a total of <b>407 calories</b>. This recipe serves
4. 3 people found this recipe to be flavorful and satisfying. A mixture of rice, sugar,
scallion, and a handful of other ingredients are all it takes to make this recipe so
scrumptious. It is brought to you by The Woks of Life. From preparation to the plate, this
recipe takes around <b>30 minutes</b>. All things considered, we decided this recipe <b>deserves
a spoonacular score of 57%</b>. This score is solid. Similar recipes include <a
href="https://spoonacular.com/recipes/crock-pot-fish-stew-rice-94006">Crock Pot Fish Stew
& Rice</a>, <a
href="https://spoonacular.com/recipes/perfectly-cooked-coconut-jasmine-rice-without-a-rice-cooker-602531">Perfectly
Cooked Coconut Jasmine Rice without a Rice Cooker</a>, and <a
href="https://spoonacular.com/recipes/rice-cooker-caribbean-style-chicken-rice-pilau-33295">Rice
Cooker Caribbean-style Chicken Rice Pilau</a>.</p>
</div>
<div id="recipe2" class="recipe-container col-md"><img class="img-fluid"
src="https://spoonacular.com/recipeImages/666075-556x370.jpg"><br>
<div class="recipe_link"><a href="http://www.taste.com.au/recipes/15297/easy+fried+rice">Easy fried
rice</a></div>
<p id="recipe_info2">The recipe Easy fried rice is ready <b>in roughly 40 minutes</b> and is
definitely a spectacular <b>gluten free and dairy free</b> option for lovers of Chinese food.
This recipe makes 4 servings with <b>296 calories</b>, <b>9g of protein</b>, and <b>9g of
fat</b> each. For <b>62 cents per serving</b>, this recipe <b>covers 12%</b> of your daily
requirements of vitamins and minerals. 1452 people have made this recipe and would make it
again. It works well as a very affordable side dish. If you have sunrice rice, vegetable oil,
eggs, and a few other ingredients on hand, you can make it. All things considered, we decided
this recipe <b>deserves a spoonacular score of 59%</b>. This score is good. Try Easy Fried Rice, Easy Fried Rice, and Easy Fried Rice for
similar recipes.</p>
</div>
</div>
<div class="row" id="row3">
<div id="recipe3" class="recipe-container col-md"><img class="img-fluid"
src="https://spoonacular.com/recipeImages/18144-556x370.jpg"><br>
<div class="recipe_link"><a
href="http://www.myrecipes.com/recipe/rice-green-peas-shrimp-butter-50400000109570/">Rice
and Green Peas with Shrimp Butter</a></div>
<p id="recipe_info3">You can never have too many side dish recipes, so give Rice and Green Peas with
Shrimp Butter a try. One portion of this dish contains roughly <b>3g of protein</b>, <b>4g of
fat</b>, and a total of <b>140 calories</b>. This gluten free and vegetarian recipe serves 6
and costs <b>24 cents per serving</b>. Not a lot of people made this recipe, and 1 would say it
hit the spot. From preparation to the plate, this recipe takes around <b>45 minutes</b>. A
mixture of shrimp butter, carrot, thyme, and a handful of other ingredients are all it takes to
make this recipe so yummy. All things considered, we decided this recipe <b>deserves a
spoonacular score of 22%</b>. This score is not so tremendous. Try <a
href="https://spoonacular.com/recipes/inspiralized-rice-parmesan-squash-rice-risotto-with-asparagus-green-peas-gluten-free-563847">Inspiralized
Rice: Parmesan Squash Rice Risotto with Asparagus & Green Peas (Gluten Free)</a>, <a
href="https://spoonacular.com/recipes/shrimp-croquettes-with-creamed-green-peas-770573">Shrimp
Croquettes with Creamed Green Peas</a>, and Shrimp, Peas And Rice
for similar recipes.</p>
</div>
<div id="recipe4" class="recipe-container col-md"><img class="img-fluid"
src="https://spoonacular.com/recipeImages/666990-556x370.jpg"><br>
<div class="recipe_link"><a href="http://allrecipes.com/recipe/fried-rice-restaurant-style/">Fried
Rice Restaurant Style</a></div>
<p id="recipe_info4">Fried Rice Restaurant Style might be just the side dish you are searching for.
For <b>42 cents per serving</b>, this recipe <b>covers 8%</b> of your daily requirements of
vitamins and minerals. This recipe makes 8 servings with <b>237 calories</b>, <b>7g of
protein</b>, and <b>5g of fat</b> each. Head to the store and pick up enriched rice, eggs,
soy sauce, and a few other things to make it today. Plenty of people made this recipe, and 4305
would say it hit the spot. It is a good option if you're following a <b>gluten free, dairy free,
fodmap friendly, and vegetarian</b> diet. From preparation to the plate, this recipe takes
roughly <b>45 minutes</b>. This recipe is typical of Chinese cuisine. All things considered, we
decided this recipe <b>deserves a spoonacular score of 53%</b>. This score is solid. Try <a
href="https://spoonacular.com/recipes/how-to-cook-fried-chicken-maxs-restaurant-style-478402">How
to cook: Fried chicken, Max’s Restaurant style</a>, <a
href="https://spoonacular.com/recipes/restaurant-style-mexican-rice-513013">Restaurant Style
Mexican Rice</a>, and <a
href="https://spoonacular.com/recipes/restaurant-style-mexican-rice-666068">Restaurant Style
Mexican Rice</a> for similar recipes.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
background-color: #fff189;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
#title{
margin-top: 5%;
margin-bottom: 5%;
}
#subtitle{
margin-top: 5%;
}
#error{
display: none;
margin-top: 5%;
}
#title h1{
font-size: 3em;
}
#loading{
display: none;
justify-content: center;
margin-top: 5%;
}
#loading div{
padding: 1%;
margin-right: 2%;
}
#form-container {
margin-top: 5%;
display: grid;
grid-template-rows: 2;
grid-template-columns: 3;
justify-content: center;
padding-top: 0%;
padding-bottom: 3%;
}
select {
border: none;
width: 100%;
margin-left: 5%;
padding: 5px;
border-radius: 50px;
grid-row: 1;
grid-column: 3;
}
#form-container input {
width: 50vw;
height: 5vh;
border-radius: 50px;
grid-row: 1;
grid-column: 1;
}
#button {
appearance: none;
color: black !important;
-webkit-appearance: none;
padding: 10px;
border: none;
background-color: #EC7357;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
color: #fff;
font-weight: 600;
border-radius: 30px;
width: 15%;
text-align: center;
}
#recipe-grid{
margin-top: 5%;
display: none;
}
.recipe-container img{
height: 70%;
width: 70%;
border: solid #EC7357 3px;
border-radius: 50px;
display: block;
margin: 5% auto auto auto;
}
.recipe-container {
height: 100%;
width: 100%;
margin-bottom: 15%;
margin-left: 2.5%;
margin-right: 2.5%;
text-align: left;
border-radius: 50px;
background: #fff189;
box-shadow: 20px 20px 60px #d9cd74,
-20px -20px 60px #ffff9e;
justify-self: center;
}
.recipe-container p{
padding: 5%;
font-size: 1em;
line-height: 1.3em;
}
.recipe_link {
text-decoration: none;
font-size: 1.6em;
text-align: center;
}
Related
I've been trying to get these pictures to become more prominent, but nothing I've done works. I want this:
desired result
but I'm getting this:
what I have
I've tried messing with width and height, and I thought it was the container causing the issue, but I couldn't find anything there.
Could anyone help me figure out why this is happening and how to prevent this in the future?
Here's the code:
#pop-rec {
padding-top: 10rem;
}
.pop-rec-wrapper {
display: flex;
flex-direction: column;
gap: 3rem;
}
.pop-rec-left {
display: flex;
gap: 1rem;
}
.pop-rec-item {
background-color: var(--primary-50);
padding: 1.2rem;
padding-top: 5rem;
border-radius: 12px;
/*width: 45%*/
margin: 0 auto;
}
.pop-rec-item-img {
margin-top: calc(-50% - 2rem);
margin-bottom: 1.0rem;
border-radius: 12px;
width: 100%;
}
.pop-rec-item-img img {
object-fit: cover;
}
.pop-rec-item-title {
font-size: 1.4rem;
color: #360215;
font-weight: 600;
margin-bottom: 1rem;
}
.pop-rec-itme-totaltime {
color: var(--primary-600);
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 1rem;
}
.pop-rec-img1 .pop-rec-img2 {
height: max-content;
width: max-content;
}
<section id="pop-rec">
<div class="container">
<div class="pop-rec-wrapper">
<div class="pop-rec-left">
<div class="pop-rec-item">
<div class="pop-rec-item-img">
<img src="https://via.placeholder.com/200" alt="food img" class="pop-rec-img1" />
<h2 class="pop-rec-item-title">
Southern Style Sweet Tea
</h2>
<h3 class="pop-rec-itme-totaltime">TOTAL TIME: 20 mins</h3>
</div>
<p class="pop-rec-item-desc">
Every gal in the south has her way of making sweet tea. We're pretty proud about it, too. Around my house, we like our tea strong and sweet. So if you ever have trouble getting your tea just right every time, give this recipe a try.
</p>
</div>
<div class="pop-rec-item">
<div class="pop-rec-item-img">
<img src="https://via.placeholder.com/200" alt="food img" class="pop-rec-img2" />
</div>
<h2 class="pop-rec-item-title">
Grandma's Collard Greens
</h2>
<h3 class="pop-rec-itme-totaltime">TOTAL TIME: 3 hours 15 minutes</h3>
<p class="pop-rec-item-desc">
These authentic Southern Collard Greens are braised in savory meat flavored and perfectly spiced pot liquor resulting in a fantastic tender silky texture!!! Serve with this cornbread or corn muffins and hot sauce for an authentic home meal. Are you looking
for the real deal? This is a true Southerner’s dream!
</p>
</div>
</div>
<div class="pop-rec-right">
<h2 class="pop-rec-title">Popular Recipes</h2>
<p class="pop-rec-text">
Our weekly trending recipes.
</p>
Explore more
</div>
</div>
</div>
</section>
A bit hard to debug, but can you try adding this or updating your class.
.pop-rec-item-img img{
object-fit: cover;
display: block;
}
Neat! It looks like the only content that is off is your image, right?
So I would target the image directly by doing either
img { width: 100%; }
Or, be more specific by pairing with your class (recommended so as to not mess with all your website's images)
.pop-rec-item img { width: 100%; }
I would also recommend removing margin-top: calc(-50% - 2rem); which is pushing your image up and out of your pink box
I also suspect that the padding of the parent divs may be what is forcing the image to be so small. On your web browser, you can right click and select inspect to visually see where padding is on your element
This actually solved the problem ( align-items:baseline; )
#pop-rec {
padding-top: 10rem;
}
.pop-rec-wrapper {
display: flex;
flex-direction: column;
gap: 3rem;
}
.pop-rec-left {
display: flex;
gap: 1rem;
align-items:baseline;
}
.pop-rec-item {
background-color: var(--primary-50);
padding: 1.2rem;
padding-top: 5rem;
border-radius: 12px;
/*width: 45%*/
margin: 0 auto;
}
.pop-rec-item-img {
margin-top: calc(-50% - 2rem);
margin-bottom: 1.0rem;
border-radius: 12px;
width: 100%;
}
.pop-rec-item-img img {
object-fit: cover;
}
.pop-rec-item-title {
font-size: 1.4rem;
color: #360215;
font-weight: 600;
margin-bottom: 1rem;
}
.pop-rec-itme-totaltime {
color: var(--primary-600);
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 1rem;
}
.pop-rec-img1 .pop-rec-img2 {
height: max-content;
width: max-content;
}
<section id="pop-rec">
<div class="container">
<div class="pop-rec-wrapper">
<div class="pop-rec-left">
<div class="pop-rec-item">
<div class="pop-rec-item-img">
<img src="https://via.placeholder.com/200" alt="food img" class="pop-rec-img1" />
<h2 class="pop-rec-item-title">
Southern Style Sweet Tea
</h2>
<h3 class="pop-rec-itme-totaltime">TOTAL TIME: 20 mins</h3>
</div>
<p class="pop-rec-item-desc">
Every gal in the south has her way of making sweet tea. We're pretty proud about it, too. Around my house, we like our tea strong and sweet. So if you ever have trouble getting your tea just right every time, give this recipe a try.
</p>
</div>
<div class="pop-rec-item">
<div class="pop-rec-item-img">
<img src="https://via.placeholder.com/200" alt="food img" class="pop-rec-img2" />
</div>
<h2 class="pop-rec-item-title">
Grandma's Collard Greens
</h2>
<h3 class="pop-rec-itme-totaltime">TOTAL TIME: 3 hours 15 minutes</h3>
<p class="pop-rec-item-desc">
These authentic Southern Collard Greens are braised in savory meat flavored and perfectly spiced pot liquor resulting in a fantastic tender silky texture!!! Serve with this cornbread or corn muffins and hot sauce for an authentic home meal. Are you looking
for the real deal? This is a true Southerner’s dream!
</p>
</div>
</div>
<div class="pop-rec-right">
<h2 class="pop-rec-title">Popular Recipes</h2>
<p class="pop-rec-text">
Our weekly trending recipes.
</p>
Explore more
</div>
</div>
</div>
</section>
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 1 year ago.
I am adding sections to our website and all but one of them are working the way I want: i.e. no margin between sections.
I'm not able to get this one page's sections to have no margin between sections; they have extra space beneath. I have went over the code with a fine tooth comb and cannot find the error.
I am first including the code of a sample page that works correctly:
<html>
<head>
<meta charset="windows-1252">
<style media="screen" type="text/css">
/*<![CDATA[*/
body {
background: fuchsia;
color: purple;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0px;
clear: left;
}
option {
background: yellow;
color: purple;
}
table {
background: yellow;
}
caption {
font-weight: bold;
}
.copyright {
color: white;
font-size: 12px;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
padding-left: 280px
}
.cta {
background: Red;
color: white;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5 5 5 5px;
clear: left;
}
.text {
background: MediumSpringGreen;
color: black;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5 5 5 5px;
clear: left;
}
}
/*]]>*/
</style>
<link href="favicon.ico" rel="shortcut icon" />
<title>Vegan and Raw Vegan Books for Sale</title>
<meta content="Choose poetry ebooks praising the benefits of veganism and vegetarian cuisine" name="description" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>
<div class="logo"><img alt="black female entrepreneurs 2018 on soapbox" height="345" src="IMG_8292.JPG" width="240" /></div>
<div class="text">
<h1>Choose Vegan Books</h1>Veganism kicks butt! Veganism kicks arse! Veganism kicks ass! These vegan poetry books call you to find fulfillment through veganism.
<h2>Hurray for Raw Foods and Raw Veganism: 40 Poems</h2>When you combine two great things, veganism and the raw food diet, you create something even greater yet: raw veganism. Raw veganism can take the world by storm. Other books focus on explaining raw
veganism and providing raw vegan recipes; this book focuses on celebrating raw veganism through poetry.
<p></p>42 pages; 40 poems.
<p></p>
</div>
<div class="cta"><img alt="vegan lifestyle book" height="230" src="Raw Veganism 1600 x 2300.jpg" width="160" />
<p></p>Choose Hurray for Raw Foods and Raw Veganism: 40 Poems
</div>
<div class="text">
<h2>Let's Use Free Speech to Praise the Vegan Way</h2>Some consider veganism tough; I consider it doable; Some consider veganism unsound; I consider it justified; Some consider veganism foolish; I consider it wise; And you will feel the same; After reading
this poetry chapbook.
<p></p>Do you want to go vegan yet need some encouragement? Have you already gone vegan and want to celebrate veganism? In either case, this book will give you what you need.
<p></p>26 pages; 25 poems.
<p></p>
</a>
</div>
<div class="cta"> <img alt="veganism pros" height="230" src="Vegan 1600 x 2300.jpg" width="160" />
<p></p>Choose Let's Use Free Speech to Praise the Vegan Way</div>
<div class="copyright">
<p></p>©2017-2021 Free Press Media Press Inc.
</div>
</body>
</html>
Here is the code that is not working:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style media="screen" type="text/css">
/*<![CDATA[*/
body {
background: fuchsia;
color: purple;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0px;
clear: left;
}
option {
background: yellow;
color: purple;
}
table {
background: yellow;
}
caption {
font-weight: bold;
}
.copyright {
color: white;
font-size: 12px;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
padding-left: 280px
}
.cta {
background: Red;
color: white;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5 5 5 5px;
clear: left;
}
.text {
background: MediumSpringGreen;
color: black;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5 5 5 5px;
clear: left;
}
}
/*]]>*/
</style>
<link href="favicon.ico" rel="shortcut icon">
<title>Best Labor Unions Books for Sale</title>
<meta content="Chose the best labor unions books promoting unions in texas and discussing labor unions pros and cons" name="description">
<meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body>
<div class="logo"><img alt="black woman activist" height="345" src="IMG_8292.JPG" width="240" /></div>
<div class="text">
<h1>Choose Union Books</h1>Andrew Bushard's efforts to unionize Accenture has been inspiring people. Andrew Bushard filed a National Labor Relations Board (NLRB) unfair labor charge against his employer Accenture for violating his unionization rights.
The NLRB agent "found merit" in his charge, so the NLRB prosecuted Accenture. Accenture capitulated and agreed to a settlement, so Andrew won the case. Victory! Andrew Bushard's unionizing success can empower you when you unionize and pursue other
leadership endeavors.
<h2>Let's Use Free Speech to Unionize Accenture and Other Companies</h2>Accenture doesn't pay its call center workers enough, so unions should intervene. This work discusses the problems of Accenture type leadership as well as advocates for the political
and philosophical need for the unionization solution.
<p></p>
36 pages. Cover illustration by rifatnaim.</div>
<div class="cta"><img alt="black female revolutionaries on cover" height="230" src="labor%20unions%20today.jpg" width="160" />
<p></p> Choose Let's Use Free Speech to Unionize Accenture and Other Companies</div>
<div class="text">
<h2>Let's Use Free Speech to Promote Unions at Accenture and Other Places</h2>Since you enjoyed my book <i>Let's Use Free Speech to Unionize Accenture and Other Companies</i>, you will enjoy this one as well. Since writing the first book, lots of things
have happened and I have developed new insights, so read this book to learn more.
<p></p>
28 pages. Cover illustration by rifatnaim.</div>
<div class="cta"><img alt="radical union book" height="230" src="unions%20labor.jpg" width="160" />
<p></p>Choose Let's Use Free Speech to Promote Unions at Accenture and Other Places</div>
<div class="text">
<h2>Let's Use Free Speech to #UnionizeAccenture and #UnionizeEverywhere</h2>Despite opposition and obstacles, Andrew Bushard has continued to answer his calling to unionize the company of Accenture. Since the publication of his books <em>Let's Use Free Speech to Unionize Accenture and Other Companies</em> and <em>Let's Use Free Speech to Promote Unions at Accenture and Other Places</em>, he has continued resisting management and he has experienced a paradigm shift realizing all unions are not the same. This work describes his encounters with bad and
harmful unions, repressive and arrogant management, apathetic and hostile coworkers, and helpful and encouraging Syndicalists.
<p></p>
32 pages. Cover illustration by rifatnaim.</div>
<div class="cta"><img alt="Unions in America" height="230" src="unfair%20labor%20practices%20examples.jpg" width="160" />
<p></p>Choose Let's Use Free Speech to #UnionizeAccenture and #UnionizeEverywhere</div>
<div class="copyright">
<p></p>©2017-2021 Free Press Media Press Inc.
</div>
</body>
</html>
Can anyone tell me what I did differently in these two codes and how to correct the second one?
What you are experiencing is called "collapsing margins". Example: If there's an h2 as the first child element inside a div, and the div has no margins, the top margin of the h2 will "go outside the div" at the top - h1, h2 etc. tags have a default margins in practically all browsers (which is a browser setting). To prevent that, you can define all margins for according elements as zero, like I did below with
h1, h2 {
margin: 0;
}
But of course this also will affect all other h1 and h2 tags, so you might want to use a class instead, or use a selector like div > h1, div > h2 { margin: 0; }
body {
background: fuchsia;
color: purple;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0px;
clear: left;
}
option {
background: yellow;
color: purple;
}
table {
background: yellow;
}
caption {
font-weight: bold;
}
.copyright {
color: white;
font-size: 12px;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
padding-left: 280px
}
.cta {
background: Red;
color: white;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5 5 5 5px;
clear: left;
}
.text {
background: MediumSpringGreen;
color: black;
font-size: 20px;
font-family: Georgia;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5 5 5 5px;
clear: left;
}
h1, h2 {
margin: 0;
}
<div class="logo"><img alt="black woman activist" height="345" src="IMG_8292.JPG" width="240" /></div>
<div class="text">
<h1>Choose Union Books</h1>Andrew Bushard's efforts to unionize Accenture has been inspiring people. Andrew Bushard filed a National Labor Relations Board (NLRB) unfair labor charge against his employer Accenture for violating his unionization rights. The
NLRB agent "found merit" in his charge, so the NLRB prosecuted Accenture. Accenture capitulated and agreed to a settlement, so Andrew won the case. Victory! Andrew Bushard's unionizing success can empower you when you unionize and pursue other leadership
endeavors.
<h2>Let's Use Free Speech to Unionize Accenture and Other Companies</h2>Accenture doesn't pay its call center workers enough, so unions should intervene. This work discusses the problems of Accenture type leadership as well as advocates for the political
and philosophical need for the unionization solution.
<p></p>
36 pages. Cover illustration by rifatnaim.</div>
<div class="cta"><img alt="black female revolutionaries on cover" height="230" src="labor%20unions%20today.jpg" width="160" />
<p></p> Choose Let's Use Free Speech to Unionize Accenture and Other Companies</div>
<div class="text">
<h2>Let's Use Free Speech to Promote Unions at Accenture and Other Places</h2>Since you enjoyed my book <i>Let's Use Free Speech to Unionize Accenture and Other Companies</i>, you will enjoy this one as well. Since writing the first book, lots of things
have happened and I have developed new insights, so read this book to learn more.
<p></p>
28 pages. Cover illustration by rifatnaim.</div>
<div class="cta"><img alt="radical union book" height="230" src="unions%20labor.jpg" width="160" />
<p></p>Choose Let's Use Free Speech to Promote Unions at Accenture and Other Places</div>
<div class="text">
<h2>Let's Use Free Speech to #UnionizeAccenture and #UnionizeEverywhere</h2>Despite opposition and obstacles, Andrew Bushard has continued to answer his calling to unionize the company of Accenture. Since the publication of his books <em>Let's Use Free Speech to Unionize Accenture and Other Companies</em> and <em>Let's Use Free Speech to Promote Unions at Accenture and Other Places</em>, he has continued resisting management and he has experienced a paradigm shift realizing all unions are not the same. This work describes his encounters with bad and
harmful unions, repressive and arrogant management, apathetic and hostile coworkers, and helpful and encouraging Syndicalists.
<p></p>
32 pages. Cover illustration by rifatnaim.</div>
<div class="cta"><img alt="Unions in America" height="230" src="unfair%20labor%20practices%20examples.jpg" width="160" />
<p></p>Choose Let's Use Free Speech to #UnionizeAccenture and #UnionizeEverywhere</div>
<div class="copyright">
<p></p>©2017-2021 Free Press Media Press Inc.
</div>
I have created a static website using html and css, the problem is that when I shrink the browser the text inside of the footer goes outside of the footer, how can I make so that the text always stays in the footer regardless of whether I shrink the browser or not?
* {
margin: 0px;
padding: 0px;
}
.nav-h1 {
text-align: center;
margin-top: 27px;
font-family: 'Open Sans';
font-size: 40px;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
a {
display: inline-block;
margin: 10px;
font-family: 'Open Sans';
color: black;
font-weight: bold;
}
.a-container {
margin-left: 10%;
margin-top: 27px;
}
.logo-section {
margin-left: 15px;
margin-top: 15px;
}
.main {
min-height: calc(100vh - 70px);
background-color:#F1F1F1;
overflow: hidden;
}
.footer {
width: 100%;
height: 100%;
background-color: black;
color: gray;
font-family: 'Open Sans';
font-size: 15px;
}
.first-box {
width: 45%;
margin: 0 auto;
margin-top: 50px;
}
.first-box-text {
margin-top: 20px;
font-family: 'Open Sans';
}
.centered-p {
text-align: center;
margin-top: 20px;
font-family: 'Open Sans';
}
.second-word {
color: #ffa200;
text-decoration: underline;
}
.centered-img{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.header {
height: 8%;
}
.logo-img {
margin-top: 10px;
height: 50px;
}
.flex-container {
display: flex;
margin-top: 50px;
margin-left: 17%;
}
section {
flex: 2;
}
aside {
flex: 1;
}
.bordered-div {
margin-top: 50px;
text-align: center;
padding: 15px;
font-family: 'Open Sans';
font-size: 25px;
border-top: solid 2px gray;
border-bottom: solid 2px gray;
}
.flex-container-first-section-a {
color: #ffa200;
text-decoration: none;
border-bottom: 2px solid #ffa200;
}
.aside-first-section {
width: 60%;
text-align: center;
padding: 15px;
margin-left: 50px;
border-top: solid 2px gray;
border-bottom: solid 2px gray;
}
.aside-img {
margin-left: 50px;
margin-top: 20px;
}
.third-section {
margin-top: 25px;
font-family: 'Open Sans';
}
.forth-section-h1{
margin-left: 28%;
margin-top: 50px;
font-family: 'Open Sans';
}
.forth-section-p {
margin-left: 90px;
margin-top: 40px;
font-family: 'Open Sans';
}
.bordered-div-h1-upper-case {
text-transform: uppercase;
}
.image-container {
display: flex;
margin-top: 30px;
}
.image-container-img {
padding: 5px;
}
.img-with-text {
margin: 10px;
font-family: 'Open Sans';
}
.img-with-text-span {
border-top: solid 3px #ffa200
}
.second-section {
margin-top: 10px;
font-family: 'Open Sans';
}
.bottom-message {
height: 300px;
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
border: solid 2px black;
}
.bottom-message-button {
width: 50%;
height: 15%;
margin-top: 50px;
background-color: #ffa200;
border-radius: 4px;
border: none;
color: white;
font-family: 'Open Sans';
font-size: 20px;
font-weight: bold;
}
.bottom-message-content {
margin-top: 60px;
margin: 70px;
}
.centered-heading {
font-family: 'Open Sans';
}
.flex-container-first-p {
font-family: 'Open Sans';
}
.bottom-message-h1, .bottom-message-content-p {
font-family: 'Open Sans';
margin-top: 20px;
}
.footer-section {
width: 50%;
margin: 0 auto;
}
.footer-content {
margin: 0px;
padding: 0px;
}
.footer-links-a {
color: gray;
text-decoration: none;
border-right: 1px solid;
padding-right: 23px;
}
.capital-words {
text-transform: uppercase;
padding-top: 10px;
}
.footer-links {
width: 800px;
margin: 0 auto;
margin-top: 50px;
}
.copyright-p {
padding-top: 10px;
}
.aside-h2 {
font-size: 15px;
text-align: center;
margin-top: 10px;
}
.aside-third-section > img {
height: 250px;
}
.line {
border-bottom: solid 2px black;
width: 70%;
margin: 0 auto;
padding-top: 50px;
}
.box-message {
height: 200px;
width: 280px;
margin-top: 50px;
margin-left: 80px;
border: solid 2px black;
}
.box-message-p {
font-family: 'Open Sans';
margin-top: 50px;
width: 60%;
margin: 0 auto;
margin-top: 35px;
font-size: 15px;
}
.box-message-button, .box-message-a {
margin-top: 30px;
margin-left: 70px;
}
.box-message-a {
color: #ffa200;
text-decoration: none;
border-bottom: solid 2px #ffa200;
font-size: 25px;
}
.trending-news-div {
width: 60%;
text-align: center;
padding: 15px;
margin-left: 70px;
margin-top: 50px;
border-top: solid 2px gray;
border-bottom: solid 2px gray;
}
<div class="container">
<div class="header">
<div class="nav">
<h1 class="nav-h1">Nip & Tuck</h1>
<div class="a-container">
<a>Lifestyle</a>
<a>Culture</a>
<a>Sports</a>
<a>Politics</a>
</div>
<div class="logo-section">
<img class="logo-img" src="/assets/images/twitter-logo.PNG" alt="twitter logo">
<img class="logo-img"src="/assets/images/youtube-logo.png" alt="youtube logo">
<img class="logo-img"src="/assets/images/facebook-logo.png" alt="facebook logo">
</div>
</div>
</div>
<div class="main">
<div class="first-box">
<h1 class="centered-heading">How one woman gave her boss, her ex-boyfriend and all her doubters, the big middle finger</h1>
<p class="first-box-text">Janice Allbright decided enough was enough. It was time to change her life. After six months of stock trading, the final result was renewed confidence, increased happiness and £128,405!
</p>
<p class="centered-p">By
<a class="second-word">Kelly Chang</a>
| 30.06.2020</p>
<img src="/assets/images/center-image.png" alt="woman carrying a bag" class="centered-img">
<p class="centered-p">"It's not arrogance, it's confidence"</p>
</div>
<div class="flex-container">
<section>
<p class="flex-container-first-p">
“My life was basically sh!t, says Janice Allbright, a single woman whose life was literally in the toilet six months ago. “I was working at a shop on the high street, earning next to nothing. Then I would go home to my abusive boyfriend. Not exactly a fairytale life.” Everything changed for Janice when she discovered online trading while killing time on her lunch break. “My colleagues, friends and boyfriend at the time all doubted me. Now I’m the queen bitch, laughing at their tears.”
</p>
<div class="bordered-div">
<p>Change your life with the Online Investing System</p>
<a class="flex-container-first-section-a" href="">Get started for free</a>
</div>
<img src="/assets/images/second-center-image.PNG" alt="woman talking on the phone" class="centered-img">
<p class="centered-p">A new and better life</p>
<section class="second-section">
<p>Janice credits her amazing financial success to trading stocks online. The highschool dropout had concerns at the beginning, due to her lack of financial knowledge and experience. “It turned out there was nothing to worry about,” she says. “My broker provided me with all of the training and tools I needed to become a successful stock trader. Their patience was amazing.” </p>
</section>
<section class="third-section">
<p>Brokers and platforms, like the Online Investing System, have turned novice investors into financial superheroes. People like Janice have taken advantage of some tough competition amongst brokers to get the best services for lower prices. Sometimes even for free. “I didn’t have any money for fancy financial tools or software. But lucky me, my broker gave me everything for free.”</p>
</section>
<section class="forth-section">
<img src="/assets/images/third-center-image.PNG" alt="" class="centered-img">
<h1 class="forth-section-h1">"Now I do whatever the f#ack I want when I f#cking want"</h1>
<p class="forth-section-p">Janice believes that her success has given her the confidence to deal with anything life throws her way. And she openly admits that displaying her wealth has become a guilty pleasure. “I was driving in my G Wagon a few weeks ago and noticed my ex-boyfriend waiting at the bus stop. I could resist. I stopped my car, rolled down the window and happily presented my middle finger. I drove away with a smile. Life is good.”</p>
</section>
<div class="bordered-div">
<p>Learn more about online stock trading and how you can profit </p>
<a class="flex-container-first-section-a" href="">Start Now</a>
</div>
<div class="bordered-div">
<h1 class="bordered-div-h1-upper-case">Celebrity News </h1>
</div>
<div class="image-container">
<div class="img-with-text">
<img src="/assets/images/hollywood-image.PNG" alt="hollywod sign" class="image-container-img">
<div class="img-with-text-bottom">
<h4 class="img-with-text-h4">Ass-tastic! We rank the best bums in Hollywood.</h4>
<span class="img-with-text-span">By Lili Johnson 30.06.2020</span>
</div>
</div>
<div class="img-with-text">
<div class="img-with-text-bottom">
<img src="/assets/images/laptop-image.PNG" alt="a picture of a laptop" class="image-container-img">
<h4 class="img-with-text-h4">Coming soon to Netflix. See which movies have us hot and bothered.</h4>
<span class="img-with-text-span">By Gavin Lewis 30.06.2020</span>
</div>
</div>
<div class="img-with-text">
<img src="/assets/images/couple-fighting-image.PNG" alt="a picture of a couple fighting" class="image-container-img">
<h4 class="img-with-text-h4">Another celebrity couple calls it quits. Why can't the rich and famous stay together?</h4>
<span class="img-with-text-span">By Adriana Huber 30.06.2020</span>
</div>
</div>
<div class="bottom-message">
<div class="bottom-message-content">
<h1 class="bottom-message-h1">The rich are getting richer</h1>
<p class="bottom-message-content-p">And so can you. By becoming an online trader of currencies, stocks and commodities, you too can increase your monthly income and upgrade your standard of living </p>
<button class="bottom-message-button">Start with free 1-on-1 coaching</button>
</div>
</div>
</section>
<aside>
<div class="aside-first-section">
<h3>Hot Topics</h3>
</div>
<div class="aside-second-section">
<img src="/assets/images/second-column-first-img.PNG" alt="" class="aside-img">
<h2 class="aside-h2">Man steals £ 2,500,000 from the <br> bank with a legal loophole!</h2>
</div>
<div class="aside-third-section">
<img src="/assets/images/second-column-second-img.PNG" alt="" class="aside-img">
<h2 class="aside-h2">Does praying to God for money <br> actually work?</h2>
</div>
<div class="line"></div>
<div class="aside-third-section">
<img src="/assets/images/second-column-sixth-image.png" alt="" class="aside-img">
<h2 class="aside-h2">Japanese scientists have <br> discovored the secret of making money. Find out if it's real.</h2>
</div>
<div class="box-message">
<div class="box-message-content">
<p class="box-message-p">Learn more about online stock trading and how you can profit.</p>
<a class="box-message-a" href="">Start Now</a>
</div>
</div>
<div class="trending-news-div">
<h3>Trending Financial News</h3>
</div>
<div class="aside-third-section">
<img src="/assets/images/second-column-third-image.png" alt="" class="aside-img">
<h2 class="aside-h2">Royal family goes bancrupt. <br> Could be out on the streets very soon.</h2>
</div>
<div class="line"></div>
<div class="aside-third-section">
<img src="/assets/images/second-column-forth-image.png" alt="" class="aside-img">
<h2 class="aside-h2">Man wins the lottery and blows it <br> all in a Spanish casino.</h2>
</div>
<div class="aside-third-section">
<img src="/assets/images/second-column-fifth-image.png" alt="" class="aside-img">
<h2 class="aside-h2">Silver vs Gold. Our experts give <br> you the breakdown.</h2>
</div>
</aside>
</div>
</div>
<div class="footer">
<section class="footer-section">
<div class="footer-content">
<p class="capital-words">TERMS AND CONDITIONS CAREFULLY READ AND AGREE TO TERMS BELOW:</p>
<br>
<p>We are not affiliated in any way with any news publication. All trademarks on this web site whether registered or not, are the property of their respective owners. The authors of this web site are not sponsored by or affiliated with any of the third-party trade mark or third-party registered trade mark owners, and make no representations about them, their owners, their products or services. It is important to note that this site and the comments/answers depicted above is to be used as an illustrative example of what some individuals have achieved with this/these products. The website, and any page on the website, is based loosely off a true story, but has been modified in multiple ways including, but not limited to: the story, the photos, and the comments. Thus, this page, and any page on this website, are not to be taken literally or as a non-fiction story. Ther page, and the results mentioned on this page, although achievable for some, are not to be construed as the results that you may achieve on the same routine. I UNDERSTAND THIS WEBSITE IS ONLY ILLUSTRATIVE OF WHAT MIGHT BE ACHIEVABLE FROM USING THIS/THESE PRODUCTS, AND THAT THE STORY/COMMENTS DEPICTED ABOVE IS NOT TO BE TAKEN LITERALLY. Ther page receives compensation for clicks on or purchase of products featured on this site.</p><br>
<p class="capital-words">IMPORTANT CONSUMER DISCLOSURE</p><br>
<p>The term "advertorial" is a combination of "advertisement" and "editorial" written in an editorial format as an independent news story, when in fact the advertisement may promote a particular product or interest. Advertorials take factual information and report it in an editorial format to allow the author, often a company marketing its products, to enhance or explain certain elements to maintain the reader's interest. A familiar example is an airline's in-flight magazines that provide an editorial reports about travel destinations to which the airline flies.</p><br>
<p>As an advertorial, I UNDERSTAND THIS WEBSITE IS ONLY ILLUSTRATIVE OF WHAT MIGHT BE ACHIEVABLE FROM USING THIS PROGRAM, AND THAT THE STORY DEPICTED ABOVE IS NOT TO BE TAKEN LITERALLY. Ther page receives compensation for clicks on or purchase of products featured on this site. Ther program is not a job but an educational opportunity that can help individuals learn how to earn money through their entrepreneurial efforts. Anyone who decides to buy any program about making money will not necessarily make money simply by purchasing the program. People who think "I bought these materials so I'm going to automatically make money" are wrong. As any type of education has so many variables, it is impossible to accurately state what you may expect to achieve, however, people who bought the program not only bought the program, but also undertook additional training and education, applied the principles to an area of the market that was growing, kept their commitments and continued to learn. If you do what the individuals depicted did, you may generally expect to achieve a great education in the area of your choice, but you should not expect to earn any specific amount of money. Typical users of the starter materials that don't enroll in coaching, don't keep their commitments and don't implement what they learn, generally make no money. Though the success of the depicted individual is true, her picture and name have been changed to protect her identity. Consistent with the advertorial concept, the comments posted in the comment section are also representative of typical comments and experiences which have been compiled into a comment format to illustrate a dialogue, however, the comments are not actual posts to this webpage and have been compiled or generated for illustrative purposes only.</p><br>
<p>We are not affiliated in any way with CNN, WebTV, News Channel 1, ABC, NBC, CBS, U.S. News or FOX, and all such trademarks on this web site, whether registered or not, are the property of their respective owners. The authors of this web site are not sponsored by or affiliated with any of the third-party trade mark or third-party registered trade mark owners, and make no representations about them, their owners, their products or services.</p>
</div>
<div class="footer-links">
<a class="footer-links-a" href="">Cookie Policy</a>
<a class="footer-links-a" href="">Privacy Policy</a>
<a class="footer-links-a" href="">Data Processing Agreement</a>
<a class="footer-links-a" href="">Terms and Conditions</a>
</div>
<p class="testimonials-p">*Testimonials:
All characters, information and events depicted on This Website are entirely fictitious. Any similarity to actual events or persons, living or dead, is purely coincidental.</p>
<p class="copyright-p">© fortunetonight.com 2020</p>
</section>
</div>
</div>
I tried setting the width in pixels and ems but that still doesn't fix the issue
You have a width of 800px set on .footer-links
That means, no matter how wide your window is, it will keep it at 800px which will make you scroll side to side.
Change the width of .footer-links to be 100% or just remove it all together and that should fix it.
You could use the #media rule in your css..
#media(max-width: 1000px){
.footer-links {
width: 600px;
margin: 0 auto;
margin-top: 50px;
}
}
Link to more on #media --> https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I have a project and it was good before changing in style, but after adding shadow to the #container it gives me this message from the grader:
The trading card page has a list of new facts
Each fact should have a corresponding label: expected 4 to equal 8
What have I done wrong?
Here is the card.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building the Prototype</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<h1>Panda</h1>
<!-- photo credit: wikipedia.org, image taken by Ritik -->
<img src="https://c402277.ssl.cf1.rackcdn.com/photos/18315/images/hero_full/Medium_WW230176.jpg?1576168323" alt="panda">
<div id="card" class="animal-info">
<p id="interesting-fact">Pandas live mainly in temperate forests high in the mountains of southwest China, where they subsist almost entirely on bamboo. They must eat around 26 to 84 pounds of it every day, depending on what part of the bamboo they are eating. They use their enlarged wrist bones that function as opposable thumbs.</p>
<ul id="facts">
<li>
<span class="lable">Scientific Name</span>: <span class="value">Ailuropoda melanoleuca</span>
</li>
<li>
<span class="lable">Average Length</span>: <span class="value">4 to 5 feet</span>
</li>
<li>
<span class="lable">Average Lifespan</span>: <span class="value">20 years</span>
</li>
<li>
<span class="lable">Habitat</span>: <span class="value">Eating in a relaxed sitting posture</span>
</li>
</ul>
<p id="summary">A newborn panda is about the size of a stick of butter—about 1/900th the size of its mother—but females can grow up to about 200 pounds, while males can grow up to about 300 pounds as adults. These bears are excellent tree climbers despite their bulk.
</p>
</div>
</div>
</body>
</html>
And here is the styles.css:
#container{
width: 513;
height: 796;
object-fit: contain;
border: 1px solid #e0e0e0;
box-shadow: 0 5px 5px 5px #e0e0e0;
padding: 20px;
font-family: sans-serif;
}
#container img {
width: 300px;
height: auto;
border: 1px solid #e0e0e0;
padding: 1px;
}
#container h1{
padding: 20px;
}
#card #interesting-fact {
font-style: italic;
}
.animal-info{
}
#facts .lable {
font-weight: bold;
}
#facts .value{
font-style: italic;
}
#card ul {
list-style-type: none;
}
#card {
border: 1px solid #e0e0e0;
padding: 20px;
}
Okay ..
I had to put the list values without the <span class="value"></span>
That's it :)
Hey everyone I am having an issue where my social media buttons for my website are not staying in the nav header area. I have tried using the float attribute and it wont stay in the header here are some images to show you what I am talking about.
http://imgur.com/zwmtXju
as you can see in this image the social media buttons wont stay in the header area, any help would be appreciated. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<header>
<nav class="clearfix">
<a href="#" id="brand">
<h1>Skull</h1>
</a>
<ul class="clearfix">
<li>Moonshine</li>
<li>Recipes</li>
<li>The Blog</li>
<li>The Store</li>
<div id="socialMedia">
<img src="imgs/fbsm.png" alt=""/>
<img src="imgs/tsm.png" alt=""/>
<img src="imgs/psm.png" alt=""/>
</div>
</ul>
Skull®
</nav>
</header>
<div id="content">
<div id="story">
<p id="ourStory">Our Story</p>
<h1 id="bootleg">Bootlegging</h1>
<p id="storyBoard">
<span class="storyTelling">This is our history,</span>
<span class="storyTelling">our story,</span>
<span class="storyTelling">of how we became one of the greatest</span>
<span class="storyTelling">moonshine brands on the planet.</span>
<span class="storyTelling">A story of struggle,</span>
<span class="storyTelling">and independence,</span>
<span class="storyTelling">accompanied by expert craftmanship.</span>
<span class="storyTelling">Using years as chapters of our book of life</span>
<span class="storyTelling">we will show you what makes our moonshine so great.</span>
<span class="storyTelling">Scroll down and enjoy.</span>
</p>
</div>
<div id="timeLine">
<div id="present">
<h1>Here and Now</h1>
<p>Now in 2014 we are a globally recognized brand that many people know and love. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="2000">
<h1>2000</h1>
<p>In 2000, bars started buying our moonshine to make drinks with. This was a huge milestone for Skull®
Because, it brought our brand to the attention of many people that were not yet customers of our great alcohol. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1960">
<h1>1960</h1>
<p>By 1960 we were booming with popularity. Skull alcohol became a recognized brand.</p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1933">
<h1>1933</h1>
<p>By 1933 Prohibition was repealed, and the market grew thin. But that didn't stop us. Skull alcohol was born.
With our superior craftsmanship skills, and our excellent customer satisfaction our legacy continued</p>
<img src="imgs/prohibitionends.jpg" width="263" height="185" alt=""/>
</div>
<div id="1920">
<h1>1920</h1>
<p>By the early 1900s, states began passing laws that banned alcohol sales, and consumption. in 1920,
nationwide Prohibition went in to effect. It was the greatest thing moonshiners could have asked for.
Because there was no legal alcohol available, the demand for moonshine shot up like a rocket. Moonshiners
had so much business they couldn't even keep up with the demand. Hidden saloons called speakeasies were even
opened in every city. they were used to sell the illegal whisky.</p>
<img src="imgs/dry.jpg" height="200" alt=""/>
</div>
<div id="1860">
<h1>1860</h1>
<p>The hatred from the Whisky Rebellion escalated in to the 1860s as the government continued
to try and collect excise tax to fund the Civil War. At this time Moonshiners and many other anti-governmental
groups, such as the KKK, joined forces to kill anyone who would release the location of their stills and attack IRS officials and
their families.</p>
<img src="imgs/kkk.jpg" width="263" height="185" alt=""/>
</div>
<div id="1794">
<h1>1794</h1>
<p>The American people, who had just fought a war to get out from under oppressive British taxes
(among other things), were not particularly pleased. So, they decided to just keep making their own
whisky, completely ignoring the federal tax. All the resentment that the citizens had toward the
government eventually exploded when several hundred angry citizens took over the city of Pittsburgh,
Pennsylvania. President George Washington called apon the militia, a group of 13,000 troops to disperse
The angry mob. The Whiskey Rebellion was a failure.</p>
<img src="imgs/wr.jpg" alt=""/>
</div>
<div id="1791">
<h1>1791</h1>
<p>Moon shining began very early in American history. Shortly after the Revolution,
the United States found itself struggling to pay for the expense of fighting a long war.
The solution was to place a federal tax on liquors and spirits that would soon be known
as the whisky tax.</p>
<img src="" alt=""/>
</div>
</div>
</div>
<footer>
<div class="footerContent"></div>
<div class="footerContent"></div>
<div class="footerContent"></div>
</footer>
</div><!--containerEnd-->
</body>
</html>
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
width: 1920px;
background-color: #202021;
}
#container{
width: 100%;
margin: 0;
background: url('../imgs/565.jpeg') repeat-y center center fixed ;
}
header{
width: 100%;
height: 100px;
}
nav{
width: 100%;
height: 100px;
position: relative;
border-bottom: 2px solid #cccccc;
}
#brand{
margin-top:15px;
width: 250px;
height: 70px;
float: left;
background: url('../imgs/skullAlcoholText.png') no-repeat;
}
#brand h1{
display: none;
}
nav ul{
padding: 0;
margin: 0 auto;
width: 600px;
height: 100px;
list-style: none;
color: #fff;
border-bottom: 2px solid #cccccc;
}
nav li{
display: inline;
float: left;
}
nav a{
color: #fff;
display:inline-block;
width: 150px;
text-align: center;
text-decoration: none;
line-height: 100px;
}
nav li a{
border-right: 1px solid #cccccc;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:first-child a{
border-left: 1px solid #cccccc;
}
nav a:hover, nav a:active {
color: #ffffff ;
}
#socialMedia{
width: 320px;
float: right;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#socialMedia a:first-child{
}
#socialMedia a{
width: 100px;
}
nav a#pull {
display: none;
}
#content {
text-align: center;
}
#story{
margin: auto;
line-height: 2;
width: 300px;
height: 200px;
}
#ourStory, #bootleg, #storyBoard{
text-align: center;
color: #ffffff;
}
Your nav ul width is 600px. It's too small to contain all these elements. Therefore div is on next row. I also prefer to change div on something more semantic, like ul.
Put your code in table
<table width="646" border="0">
<tr><td width="98"><ul class="clearfix"><li>Moonshine</li></td><td width="82"><li>Recipes</li></td><td width="88"><li>The Blog</li></td><td width="110"><li>The Store</li></td>``<td width="78"><div id="socialMedia"><img src="imgs/fbsm.png" alt=""/></div></td><td width="78"><div id="socialMedia"><img src="imgs/tsm.png" alt=""/></div></td><td width="82"><div id="socialMedia"><img src="imgs/psm.png" alt=""/></div></td></tr></table></ul>