HTML Text Wrapping Behind Vertical Navigation - css

I'm in the process of building a small website for my Roleplay group, and was overjoyed to figure out how to create a vertical navigation bar, but I'm noticing that on every display, the text falls behind it.
Is there a way to set where text begins and navigation ends?
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 52;
}
#welcome {
text-align: center;
font-family: "Arial"
}
#intro {
text-align: center;
font-family: "Arial"
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="HOME_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact
<li>
</ul>
</div>
<!--HEADER-->
<div class="Head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--BELOW HEAD CONTENT-->
<div class="Welcome">
<p>
<h2 id="welcome">Welcome to Eorzea!</h2>
<div style="text-align:center;">
<img src="group.png" width="40%">
</div>
<div class="IntroParagraph" style="text-align:center;" id="Intro">
<p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
<br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/>
<br/>
<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its outlying islands. The realm has known many unique civilizations throughout its long history,
and harbors many starkly different ones to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the South, a vast expanse of unforgiving desert harbors few willing to brave
its scalding heat.</p>
<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the very stones of the land rich with veins of the power-infused crystals. </p>
<!--WRITE-UP: "EORZEA"-->
<div class="Welcome">
<p>
<h2 id="welcome">City-States of Eorzea</h2>
<div style="text-align:left;">
<img src="eorzea.jpg" width="40%">
<p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
<ol type="I">
<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft. The city-state greatly emphasizes the harmony of man and nature,
its resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls. Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the
wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential to determine the fate of the city’s citizens. </li>
<li>
</div>
</p>
</body>
</html>


To start, I would suggest pinning through your code and making some adjustments tot he structure. There looks to be a lot of missing tags (which I tried to correct in the fiddle). One tip would be to add comments to your closing div tags so you can see where each section ends.
With that said, what you can do is apply a margin-left: 200px; to your .Welcome class in order to shift everything over from the left side of the page. Since 200px is the width of your fixed navigation, you want to compensate that width. And since your Welcome class is wrapping your body content, you would add the margin to this class
https://fiddle.jshell.net/kez8aLam/
.Welcome {
margin-left: 200px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 52;
}
#welcome {
text-align: center;
font-family: "Arial";
}
#intro {
text-align: center;
font-family: "Arial"
}
<div class="home-wrap">
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact
<li>
</ul>
</div>
<!--HEADER-->
<div class="Head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--BELOW HEAD CONTENT-->
<div class="Welcome">
<p>
<h2 id="welcome">Welcome to Eorzea!</h2>
<div style="text-align:center;">
<img src="group.png" width="40%">
</div>
<div class="IntroParagraph" style="text-align:center;" id="Intro">
<p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
<br/><b>Orrick Ballard (Explorer and Map-Maker)</b>
<br/>
<br/>
<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its outlying islands. The realm has known many unique civilizations throughout its long history,
and harbors many starkly different ones to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the South, a vast expanse of unforgiving desert harbors few willing to brave
its scalding heat.</p>
<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the very stones of the land rich with veins of the power-infused crystals. </p>
</div>
</div>
</div>
<!--WRITE-UP: "EORZEA"-->
<div class="Welcome">
<p>
<h2 id="welcome">City-States of Eorzea</h2>
<div style="text-align:left;">
<img src="eorzea.jpg" width="40%">
<p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
<ol type="I">
<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft. The city-state greatly emphasizes the harmony of man and nature,its
resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls.
<li>Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential to determine the fate of the city’s citizens. </li>
</ol>
</div>
</div>


The reason of why "text falls behind navigation" is: the ul element's position is fixed, which makes it detached from document (moved to another layer and does not occupy any space in the page). Thus the text occupies all page space and part of them falls behind ul.
As you may need fixed ul for good reason, the below code only adds one css rule -- define left padding for text, which leaves space for ul element display:
.Head, .Welcome {
padding-left: 200px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000
color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 52;
}
#welcome {
text-align: center;
font-family: "Arial"
}
#intro {
text-align:center;
font-family: "Arial"
}
.Head, .Welcome {
padding-left: 200px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="HOME_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact<li>
</ul>
</div>
<!--HEADER-->
<div class="Head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--BELOW HEAD CONTENT-->
<div class="Welcome">
<p>
<h2 id="welcome">Welcome to Eorzea!</h2>
<div style="text-align:center;">
<img src="group.png" width="40%">
</div>
<div class="IntroParagraph" style="text-align:center;" id="Intro">
<p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
<br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/>
<br/>
<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its
outlying islands. The realm has known many unique civilizations throughout its long history, and harbors many starkly different ones
to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the
South, a vast expanse of unforgiving desert harbors few willing to brave its scalding heat.</p>
<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the
very stones of the land rich with veins of the power-infused crystals. </p>
<!--WRITE-UP: "EORZEA"-->
<div class="Welcome">
<p>
<h2 id="welcome">City-States of Eorzea</h2>
<div style="text-align:left;">
<img src="eorzea.jpg" width="40%">
<p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
<ol type="I">
<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft.
The city-state greatly emphasizes the harmony of man and nature, its resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls.
Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential
to determine the fate of the city’s citizens. </li>
<li>
</div>
</p>
</body>
</html>

Related

How Do I Align Icons?

Here's a screenshot of how it looks like How do I align these icons to the h2? I want them on the left of those h2, and I would also like to increase their size. Of course, if possible, without destroying the layout I've built.
I tried using float right but I am really struggling in having them looking properly on the left of my H2.
Please help!
* {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
}
#main-content {
background-color: #000000;
background-image: linear-gradient(147deg, #000000 0%, #04619f 74%);
color: white;
padding: 2%;
}
#header-content h1 {
font-size: 70px;
font-weight: 500;
}
#header-content p {
font-size: 20px;
font-weight: 500;
opacity: 0.8;
}
#content-icons {
opacity: 0.8;
display: inline;
}
#content-icons i {
float: left;
font-size: 30px;
line-height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<div class="row align-items-center" id="main-content">
<div class="col fade-in" id="header-content">
<h1>UK Bridging Loans</h1>
<p>Your Bridging Finance Partner</p>
</div>
<div class="col float-right" id="content-icons">
<ul class="fa-ul">
<li>
<span class="fa-li"><i class="far fa-building"></i></span>
<h2>Commercial Bridging Loans</h2>
<p>
Find out more about our commercial bridging loans to fund your
project here.
</p>
</li>
<li>
<span class="fa-li"><i class="fas fa-store-alt"></i></span>
<h2>Secured Bridging Loans</h2>
<p>
Secured bridging loans are the most popular form, securing the
loan against an existing property brings better interest rates and
more interest from lenders. Find out more here.
</p>
</li>
<li>
<span class="fa-li"><i class="fas fa-warehouse"></i></span>
<h2>Unsecured Bridging Loans</h2>
<p>
Unsecured bridging loans are harder to get hold of as banks
normally insist on securing your loan against a property/asset of
some kind. However, we are approved to offer this option to
customers. Find out more here.
</p>
</li>
</ul>
</div>
</div>

I would suggest using a flex box. Wrap everything that you want to display in a single line and assign display property to flex.

Center text within a menu

I'm designing an AMP page. I'm having trouble getting the text Perfect Imprints in the menu to be centered and on the same line as the hamburger icon.
I can only seem to EITHER get it centered, but on a seperate line
-- OR --
get it left-aligned on the same line.
How can I resolve this issue?
Ideally, the text could be a logo image if desired. But if not, that's okay too.
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="canonical" href="https://www.perfectimprints.com/custom-promos/20417/Foam-Fingers.html">
<title>Custom Foam Fingers from Perfectimprints.com</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.text-centered {
text-align: center;
}
.sku {
color: gray;
}
.margin-minus-1 {
margin-top: -1em;
}
.wrapper-link {
text-decoration: none;
color: inherit;
}
.wrapper-link:visited {
text-decoration: none;
color: inherit;
}
.wrapper-link:hover {
text-decoration: none;
color: inherit;
}
.product {
border: 1px solid #DDDDDD;
border-radius: 1%;
margin-bottom: 1em;
}
.hamburger {
font-size: 1.5em;
padding: 0.1em 0 0.2em 0.3em;
display: inline;
}
.headerbar {
background-color: black;
color: white;
}
.site-name--container {
display: inline-block;
text-align: center;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.sidebar {
padding: 2em;
margin: 0;
}
.sidebar > li {
list-style: none;
margin-bottom:10px;
}
.sidebar a {
text-decoration: none;
}
.close-sidebar {
font-size: 1.5em;
padding-left: 1em;
padding-top: 1em;
}
body {
font-family: 'Open Sans', sans-serif;
}
.container {
margin: 1em;
}
</style>
</head>
<body>
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
<div class="site-name--container"><div class="site-name">Perfect Imprints</div></div>
</header>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
<div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
<ul class="sidebar">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
</amp-sidebar>
<div class="container">
<h1 class="h1">Foam Fingers</h1>
<p>
Custom foam fingers and hands are great spirit items to cheer on your sports team.
Choose from our large assortment of various shaped foam hands and foam finger cheering
accessories to show your school spirit. These foam fingers and foam hands are great for
booster club fundraising. Whether you choose a giant foam finger, or a foam claw or
talon, these custom foam cheering fingers will really help generate team spirit. These
imprinted foam hands can be personalized with your custom mascot and make great spirit
items to sell to the crowd.
</p>
<div class="product" style="padding-top: 1em;">
<a class="wrapper-link" href="https://www.perfectimprints.com/custom-promos/20417/Foam-Fingers.html">
<amp-img
alt="Foam Finger Test"
width="1000"
height="1000"
src="https://542c324650a2b8b39f64-e6578149d8b8b981b8afdc5812eb6a36.ssl.cf5.rackcdn.com/thumb/1606-RED&CHARCOAL_INHAND-U.jpg"
layout="responsive"
></amp-img>
<h3 class="product-name text-centered">
12" #1 Foam Deluxe Hand
</h3>
<h4 class="text-centered sku margin-minus-1">#PI-109-1606</h4>
<p class="text-centered price">As low as: <strong>$2.82</strong></p>
</a>
</div>
<div class="product" style="padding-top: 1em;">
<a class="wrapper-link" href="https://www.perfectimprints.com/custom-promos/20417/Foam-Fingers.html">
<amp-img
alt="Foam Finger Test"
width="1000"
height="1000"
src="https://542c324650a2b8b39f64-e6578149d8b8b981b8afdc5812eb6a36.ssl.cf5.rackcdn.com/thumb/1606-RED&CHARCOAL_INHAND-U.jpg"
layout="responsive"
></amp-img>
<h3 class="product-name text-centered">
12" #1 Foam Deluxe Hand
</h3>
<h4 class="text-centered sku margin-minus-1">#PI-109-1606</h4>
<p class="text-centered price">As low as: <strong>$2.82</strong></p>
</a>
</div>
<h2 class="h2">Foam Fingers Are #1</h2>
<p>
A cheap #1 foam finger can make a great for giveaway while the giant foam fingers are great
for selling to the fans. If you want to raise some funds for your booster club or your school,
selling custom printed foam fingers is a great fundraiser. Choose from dozens of different
foam hands or even foam claws to best match your school mascot. If you can't find the shape
you want, we can create a customized shape for you with a minimum order as low as 250 pieces.
If you plan on selling foam fingers for fundraising, be sure to check out our Guide for
<a target="_blank" href="https://www.perfectimprints.com/blog/custom-foam-fingers/amp">Buying Custom Foam Fingers</a>.
</p>
</div>
</body>
</html>
https://codepen.io/anon/pen/KBGzre

Your class site-name--container has width: 100%; causing your text to jump to the next line. If you set your width to auto for that section your text Perfect Imprints would be on the same line.
To keep your text centered and vertically aligned middle just add:
.headerbar {
display: flex;
align-items: center;
}
The display flex is to fill your headerbar with the content and the align-items: center is to keep your content vertically aligned in the flex box.

Add some CSS properties in your .headerbar class -
.headerbar {
display: flex;
align-items: center;
}

HTML5/CSS section.main not working [duplicate]

This question already has answers here:
What is the difference between id and class in CSS, and when should I use them? [duplicate]
(15 answers)
Closed 6 years ago.
Been trying to figure this out for over 2 hours. Ran it through validator etc.
Its a class assignment and I cant figure out how to get the section.main class to line up correctly.
The html and the css is listed. Im not finished with the assignment but when you look at the site its pretty obvious what I am having issues with floating the section.main class properly or something. Sorry new to this.
If its easier to see the site you can view it here. http://ddawes27.webstudentsites.com/tut04/review/rose.htm
/*
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Style Sheet
Author: Derek Dawes
Date: 7/3/16
Filename: race.css
Supporting Files:
*/
header, article, aside, figure, figcaption, hgroup, section, nav {
display: block;
}
* {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
padding: 0px;
margin: 0px;
/*outline: 1px solid red; */
}
/* BODY SECTION */
body {
position: relative;
width: 98%;
min-width: 1000px;
max-width: 1400px;
}
/* HEADER SECTION */
header {
position: absolute;
top: 0px;
left: 0px;
width: 20%;
background-color: black;
padding-bottom: 500px;
}
header img {
width: 100%;
}
/* NAVIGATION SECTION */
nav a {
text-decoration: none;
}
/* HORIZONTAL NAVIGATION PANE */
nav.horizontal {
width: 80%;
margin-left: 20%;
}
nav.horizontal li {
display: block;
float: left;
width: 20%;
background-color: rgb(49, 38, 31);
padding: 5px 0px 5px 0px;
text-align: center;
text-transform: uppercase;
font-size: 85%;
}
nav.horizontal li a {
color: white;
}
nav.horizontal li a:hover {
color: rgb(215, 181, 151);
}
/* VERTICAL NAVIGATION PANE */
nav.vertical li {
font-size: 85%;
list-style-type: none;
}
nav.vertical a {
color: white;
display: block;
text-indent: 10px;
}
nav.vertical a:hover {
background-color: rgb(51, 51, 51);
outline: 2px solid rgb(215, 181, 151);
}
li.newgroup {
padding-top: 25px;
}
/* MAIN SECTION */
.main {
float: left;
margin-left: 21%;
margin-top: 20px;
width: 49%;
outline: 2px solid red;
}
h1.main {
color: rgb(189, 131, 82);
font-size: 180%;
font-weight: normal;
letter-spacing: 5px;
}
p.main {
margin: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Rose Hill Rally Page
Author: Derek Dawes
Date: 7/3/16
Filename: rose.htm
Supporting files: alisha.png, cp_logo2.png,
modernizr-1.5.js, race.css,
slide01.png - slide08.png
-->
<meta charset="UTF-8" />
<title>Rose Hill Rally</title>
<script src="modernizr-1.5.js"></script>
<link href="race.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="cp_logo2.png" alt="Cycle Pathology" />
<nav class="vertical">
<ul>
<li>Events Page</li>
<li class="newgroup">Rose Hill Rally</li>
<li>Tour the Palisades</li>
<li>Gunnison Challenge</li>
<li>Steamboat Springs Rally</li>
<li>Copper Triangle</li>
<li>Durango Tour</li>
<li>Montrose Meander</li>
<li class="newgroup">Route Sheets & Maps</li>
<li>Grand Junction Bike Fest</li>
<li>Off-Road Cycling</li>
<li>Newsletter</li>
<li>Photo Album</li>
<li>Editor</li>
<li>Sponsors</li>
<li class="newgroup">Cycling Links</li>
<li>Colorado Cycling Groups</li>
<li>U.S. Bike Federation</li>
<li>Tips & Tricks</li>
<li class="newgroup">About Cycle Pathology</li>
</ul>
</nav>
</header>
<nav class="horizontal">
<ul>
<li>Home</li>
<li>Members Only</li>
<li>Market Place</li>
<li>Message Board</li>
<li>Contact Info</li>
</ul>
</nav>
<section id="main">
<aside>
<p>The Grand Junction Neonatal Intensive Care Unit offers comprehensive neonatal
diagnostic and treatment facilities for critically ill newborns. We're dedicated
to providing the highest quality care for all newborns, ranging from healthy
neonates to sick or premature newborns requiring close observation or intensive care.
</p>
<p>All of the neonatologists are board certified. We believe it's critical that our
clinicians learn about the latest advances in neonatal intensive care to
better serve the community of Grand Junction.
</p>
</aside>
<h1>Rose Hill Rally</h1>
<p>
The Grand Junction Neonatal ICU is proud to sponsor this
year's Rose Hill Rally. Please join us and Cycle Pathology for the
Century Ride, Metric Century (62 miles), or 50K (31 miles). Rest stations
and aid stations will be spaced throughout the Century and Metric Century
routes.
</p>
<ul>
<li>Come to Grand Junction a day early. Visit historic downtown Grand Junction,
explore the Grand Valley, ride the Colorado National Monument, or tour
local wineries.
</li>
<li>Riders begin the course between 7:00 a.m. and 9:00 a.m. for both the Metric
Century and the 50K distance. Pick up your ride packet at Canyon View Park
between 6:00 a.m. and 9:00 a.m.
</li>
<li>Entry fee includes rider breakfast & hot lunch, Rose Hill Rally t-shirt,
and course map.
</li>
<li>Stay and enjoy your post-ride meal with music provided by the Dam Busters.
</li>
<li>Teams of six or more riders will receive special t-shirts. Team entry forms must
be received two weeks prior to the rally.
</li>
</ul>
</section>
<article>
<hgroup>
<h1>Ride the Century</h1>
<h2>— Alisha Smith</h2>
</hgroup>
<p>While riding 100 miles in a day may sound extreme, most casual cyclists can complete
a century if they follow a comprehensive training routine. Your bike should be comfortable
and fit you well. Consider having a tune-up before the ride, and carry a spare tire
and patch kit, tools, and a pump.
</p>
<p>If you're not a regular cyclist, start your training at least 12 weeks before your
century. Hills are a great way to train for your ride, and don't forget to allow
for recovery days after your longer rides.
</p>
<p>A few days prior to the ride, you should keep hydrated and cut back on caffeine and
alcohol. On the day of your century, eat a light breakfast of high-carbohydrate foods
and drink lots of water. On the ride, drink water or a sports drink <em>before</em>
you're thirsty.
</p>
<p>A century isn't a race, so adopt a relaxed pace that you can follow for several
hours. Alter your position throughout your ride, getting up off the saddle,
stretching your back, and moving your hand position. The ride goes easier if
you share it with a friend or two.
</p>
<p>Above all, <em>enjoy the ride</em>! Most centuries are designed to go through
scenic areas of the state. Peddle on and remember to watch the scenery.
</p>
</article>
<figure>
<div>
<img src="slide01.png" alt="" />
<img src="slide02.png" alt="" />
<img src="slide03.png" alt="" />
<img src="slide04.png" alt="" />
<img src="slide05.png" alt="" />
<img src="slide06.png" alt="" />
<img src="slide07.png" alt="" />
<img src="slide08.png" alt="" />
</div>
<figcaption>Pictures from Last Year's Rose Hill Rally!</figcaption>
</figure>
</body>
</html>

In style add h1 and p tage after #main
/*
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Style Sheet
Author: Derek Dawes
Date: 7/3/16
Filename: race.css
Supporting Files:
*/
header, article, aside, figure, figcaption, hgroup, section, nav {
display: block;
}
* {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
padding: 0px;
margin: 0px;
/*outline: 1px solid red; */
}
/* BODY SECTION */
body {
position: relative;
width: 98%;
min-width: 1000px;
max-width: 1400px;
}
/* HEADER SECTION */
header {
position: absolute;
top: 0px;
left: 0px;
width: 20%;
background-color: black;
padding-bottom: 500px;
}
header img {
width: 100%;
}
/* NAVIGATION SECTION */
nav a {
text-decoration: none;
}
/* HORIZONTAL NAVIGATION PANE */
nav.horizontal {
width: 80%;
margin-left: 20%;
}
nav.horizontal li {
display: block;
float: left;
width: 20%;
background-color: rgb(49, 38, 31);
padding: 5px 0px 5px 0px;
text-align: center;
text-transform: uppercase;
font-size: 85%;
}
nav.horizontal li a {
color: white;
}
nav.horizontal li a:hover {
color: rgb(215, 181, 151);
}
/* VERTICAL NAVIGATION PANE */
nav.vertical li {
font-size: 85%;
list-style-type: none;
}
nav.vertical a {
color: white;
display: block;
text-indent: 10px;
}
nav.vertical a:hover {
background-color: rgb(51, 51, 51);
outline: 2px solid rgb(215, 181, 151);
}
li.newgroup {
padding-top: 25px;
}
/* MAIN SECTION */
#main {
float: left;
margin-left: 21%;
margin-top: 20px;
width: 49%;
outline: 2px solid red;
}
#main h1 {
color: rgb(189, 131, 82);
font-size: 180%;
font-weight: normal;
letter-spacing: 5px;
}
#main p {
margin: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Rose Hill Rally Page
Author: Derek Dawes
Date: 7/3/16
Filename: rose.htm
Supporting files: alisha.png, cp_logo2.png,
modernizr-1.5.js, race.css,
slide01.png - slide08.png
-->
<meta charset="UTF-8" />
<title>Rose Hill Rally</title>
<script src="modernizr-1.5.js"></script>
<link href="race.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="cp_logo2.png" alt="Cycle Pathology" />
<nav class="vertical">
<ul>
<li>Events Page</li>
<li class="newgroup">Rose Hill Rally</li>
<li>Tour the Palisades</li>
<li>Gunnison Challenge</li>
<li>Steamboat Springs Rally</li>
<li>Copper Triangle</li>
<li>Durango Tour</li>
<li>Montrose Meander</li>
<li class="newgroup">Route Sheets & Maps</li>
<li>Grand Junction Bike Fest</li>
<li>Off-Road Cycling</li>
<li>Newsletter</li>
<li>Photo Album</li>
<li>Editor</li>
<li>Sponsors</li>
<li class="newgroup">Cycling Links</li>
<li>Colorado Cycling Groups</li>
<li>U.S. Bike Federation</li>
<li>Tips & Tricks</li>
<li class="newgroup">About Cycle Pathology</li>
</ul>
</nav>
</header>
<nav class="horizontal">
<ul>
<li>Home</li>
<li>Members Only</li>
<li>Market Place</li>
<li>Message Board</li>
<li>Contact Info</li>
</ul>
</nav>
<section id="main">
<aside>
<p>The Grand Junction Neonatal Intensive Care Unit offers comprehensive neonatal
diagnostic and treatment facilities for critically ill newborns. We're dedicated
to providing the highest quality care for all newborns, ranging from healthy
neonates to sick or premature newborns requiring close observation or intensive care.
</p>
<p>All of the neonatologists are board certified. We believe it's critical that our
clinicians learn about the latest advances in neonatal intensive care to
better serve the community of Grand Junction.
</p>
</aside>
<h1>Rose Hill Rally</h1>
<p>
The Grand Junction Neonatal ICU is proud to sponsor this
year's Rose Hill Rally. Please join us and Cycle Pathology for the
Century Ride, Metric Century (62 miles), or 50K (31 miles). Rest stations
and aid stations will be spaced throughout the Century and Metric Century
routes.
</p>
<ul>
<li>Come to Grand Junction a day early. Visit historic downtown Grand Junction,
explore the Grand Valley, ride the Colorado National Monument, or tour
local wineries.
</li>
<li>Riders begin the course between 7:00 a.m. and 9:00 a.m. for both the Metric
Century and the 50K distance. Pick up your ride packet at Canyon View Park
between 6:00 a.m. and 9:00 a.m.
</li>
<li>Entry fee includes rider breakfast & hot lunch, Rose Hill Rally t-shirt,
and course map.
</li>
<li>Stay and enjoy your post-ride meal with music provided by the Dam Busters.
</li>
<li>Teams of six or more riders will receive special t-shirts. Team entry forms must
be received two weeks prior to the rally.
</li>
</ul>
</section>
<article>
<hgroup>
<h1>Ride the Century</h1>
<h2>— Alisha Smith</h2>
</hgroup>
<p>While riding 100 miles in a day may sound extreme, most casual cyclists can complete
a century if they follow a comprehensive training routine. Your bike should be comfortable
and fit you well. Consider having a tune-up before the ride, and carry a spare tire
and patch kit, tools, and a pump.
</p>
<p>If you're not a regular cyclist, start your training at least 12 weeks before your
century. Hills are a great way to train for your ride, and don't forget to allow
for recovery days after your longer rides.
</p>
<p>A few days prior to the ride, you should keep hydrated and cut back on caffeine and
alcohol. On the day of your century, eat a light breakfast of high-carbohydrate foods
and drink lots of water. On the ride, drink water or a sports drink <em>before</em>
you're thirsty.
</p>
<p>A century isn't a race, so adopt a relaxed pace that you can follow for several
hours. Alter your position throughout your ride, getting up off the saddle,
stretching your back, and moving your hand position. The ride goes easier if
you share it with a friend or two.
</p>
<p>Above all, <em>enjoy the ride</em>! Most centuries are designed to go through
scenic areas of the state. Peddle on and remember to watch the scenery.
</p>
</article>
<figure>
<div>
<img src="slide01.png" alt="" />
<img src="slide02.png" alt="" />
<img src="slide03.png" alt="" />
<img src="slide04.png" alt="" />
<img src="slide05.png" alt="" />
<img src="slide06.png" alt="" />
<img src="slide07.png" alt="" />
<img src="slide08.png" alt="" />
</div>
<figcaption>Pictures from Last Year's Rose Hill Rally!</figcaption>
</figure>
</body>
</html>

main is an id not a class: #main instead of .main
/*
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Style Sheet
Author: Derek Dawes
Date: 7/3/16
Filename: race.css
Supporting Files:
*/
header, article, aside, figure, figcaption, hgroup, section, nav {
display: block;
}
* {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
padding: 0px;
margin: 0px;
/*outline: 1px solid red; */
}
/* BODY SECTION */
body {
position: relative;
width: 98%;
min-width: 1000px;
max-width: 1400px;
}
/* HEADER SECTION */
header {
position: absolute;
top: 0px;
left: 0px;
width: 20%;
background-color: black;
padding-bottom: 500px;
}
header img {
width: 100%;
}
/* NAVIGATION SECTION */
nav a {
text-decoration: none;
}
/* HORIZONTAL NAVIGATION PANE */
nav.horizontal {
width: 80%;
margin-left: 20%;
}
nav.horizontal li {
display: block;
float: left;
width: 20%;
background-color: rgb(49, 38, 31);
padding: 5px 0px 5px 0px;
text-align: center;
text-transform: uppercase;
font-size: 85%;
}
nav.horizontal li a {
color: white;
}
nav.horizontal li a:hover {
color: rgb(215, 181, 151);
}
/* VERTICAL NAVIGATION PANE */
nav.vertical li {
font-size: 85%;
list-style-type: none;
}
nav.vertical a {
color: white;
display: block;
text-indent: 10px;
}
nav.vertical a:hover {
background-color: rgb(51, 51, 51);
outline: 2px solid rgb(215, 181, 151);
}
li.newgroup {
padding-top: 25px;
}
/* MAIN SECTION */
#main {
float: left;
margin-left: 21%;
margin-top: 20px;
width: 49%;
outline: 2px solid red;
}
#main h1 {
color: rgb(189, 131, 82);
font-size: 180%;
font-weight: normal;
letter-spacing: 5px;
}
#main p {
margin: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Rose Hill Rally Page
Author: Derek Dawes
Date: 7/3/16
Filename: rose.htm
Supporting files: alisha.png, cp_logo2.png,
modernizr-1.5.js, race.css,
slide01.png - slide08.png
-->
<meta charset="UTF-8" />
<title>Rose Hill Rally</title>
<script src="modernizr-1.5.js"></script>
<link href="race.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="cp_logo2.png" alt="Cycle Pathology" />
<nav class="vertical">
<ul>
<li>Events Page</li>
<li class="newgroup">Rose Hill Rally</li>
<li>Tour the Palisades</li>
<li>Gunnison Challenge</li>
<li>Steamboat Springs Rally</li>
<li>Copper Triangle</li>
<li>Durango Tour</li>
<li>Montrose Meander</li>
<li class="newgroup">Route Sheets & Maps</li>
<li>Grand Junction Bike Fest</li>
<li>Off-Road Cycling</li>
<li>Newsletter</li>
<li>Photo Album</li>
<li>Editor</li>
<li>Sponsors</li>
<li class="newgroup">Cycling Links</li>
<li>Colorado Cycling Groups</li>
<li>U.S. Bike Federation</li>
<li>Tips & Tricks</li>
<li class="newgroup">About Cycle Pathology</li>
</ul>
</nav>
</header>
<nav class="horizontal">
<ul>
<li>Home</li>
<li>Members Only</li>
<li>Market Place</li>
<li>Message Board</li>
<li>Contact Info</li>
</ul>
</nav>
<section id="main">
<aside>
<p>The Grand Junction Neonatal Intensive Care Unit offers comprehensive neonatal
diagnostic and treatment facilities for critically ill newborns. We're dedicated
to providing the highest quality care for all newborns, ranging from healthy
neonates to sick or premature newborns requiring close observation or intensive care.
</p>
<p>All of the neonatologists are board certified. We believe it's critical that our
clinicians learn about the latest advances in neonatal intensive care to
better serve the community of Grand Junction.
</p>
</aside>
<h1>Rose Hill Rally</h1>
<p>
The Grand Junction Neonatal ICU is proud to sponsor this
year's Rose Hill Rally. Please join us and Cycle Pathology for the
Century Ride, Metric Century (62 miles), or 50K (31 miles). Rest stations
and aid stations will be spaced throughout the Century and Metric Century
routes.
</p>
<ul>
<li>Come to Grand Junction a day early. Visit historic downtown Grand Junction,
explore the Grand Valley, ride the Colorado National Monument, or tour
local wineries.
</li>
<li>Riders begin the course between 7:00 a.m. and 9:00 a.m. for both the Metric
Century and the 50K distance. Pick up your ride packet at Canyon View Park
between 6:00 a.m. and 9:00 a.m.
</li>
<li>Entry fee includes rider breakfast & hot lunch, Rose Hill Rally t-shirt,
and course map.
</li>
<li>Stay and enjoy your post-ride meal with music provided by the Dam Busters.
</li>
<li>Teams of six or more riders will receive special t-shirts. Team entry forms must
be received two weeks prior to the rally.
</li>
</ul>
</section>
<article>
<hgroup>
<h1>Ride the Century</h1>
<h2>— Alisha Smith</h2>
</hgroup>
<p>While riding 100 miles in a day may sound extreme, most casual cyclists can complete
a century if they follow a comprehensive training routine. Your bike should be comfortable
and fit you well. Consider having a tune-up before the ride, and carry a spare tire
and patch kit, tools, and a pump.
</p>
<p>If you're not a regular cyclist, start your training at least 12 weeks before your
century. Hills are a great way to train for your ride, and don't forget to allow
for recovery days after your longer rides.
</p>
<p>A few days prior to the ride, you should keep hydrated and cut back on caffeine and
alcohol. On the day of your century, eat a light breakfast of high-carbohydrate foods
and drink lots of water. On the ride, drink water or a sports drink <em>before</em>
you're thirsty.
</p>
<p>A century isn't a race, so adopt a relaxed pace that you can follow for several
hours. Alter your position throughout your ride, getting up off the saddle,
stretching your back, and moving your hand position. The ride goes easier if
you share it with a friend or two.
</p>
<p>Above all, <em>enjoy the ride</em>! Most centuries are designed to go through
scenic areas of the state. Peddle on and remember to watch the scenery.
</p>
</article>
<figure>
<div>
<img src="slide01.png" alt="" />
<img src="slide02.png" alt="" />
<img src="slide03.png" alt="" />
<img src="slide04.png" alt="" />
<img src="slide05.png" alt="" />
<img src="slide06.png" alt="" />
<img src="slide07.png" alt="" />
<img src="slide08.png" alt="" />
</div>
<figcaption>Pictures from Last Year's Rose Hill Rally!</figcaption>
</figure>
</body>
</html>

id vs class
It seems like you made a simple mistake. In your css file, instead of using .main, use #main. Since at the moment, those css lines are not being looked at (unless you have a class of .main somewhere).
To further understand the difference between ids and classes, read this page.

flexbox left margin css

screenshot
I am trying out Flexbox. Building a menu. I have no margins defined but My menu s being pushed out from the side. Is this a bug? Any other ideas? I am really stuck
`
<html>
<head>
<title>Ribbit - A flexbox Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
background-color: #ff9;
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.row,
.columns,
nav ul {
display: flex;
flex-direction: column;
}
.row {
background-color: rgba(255,255,255, .33);
border: 1px solid rgba(150,150,150, .66);
}
.columns {
background-color: rgba(200,200,200, .5);
border: 1px solid rgba(150,150,150, .66);
}
nav ul {
text-transform:uppercase;
font-size: .75rem;
font-weight: 900;
letter-spacing: .025rem;
list-style: none;
border: 1px solid orange;
}
nav ul li {
background-color: rgba(0,0,0, .9);
padding: .75em 1em;
border-bottom: 1px solid white;
color: #fff;
}
#media (min-width: 769px) {
body {
background-color: #f9f;
}
nav ul {
flex-direction: row;
}
nav ul li {
display: flex;
flex: 1;
}
}
#media (min-width: 1024px) {
body {
background-color: #9ff;
}
}
</style>
</head>
<body>
<div class="row">
<header class="row">
<h1>Flexbox <span>Inc.</span></h1>
</header>
</div>
<nav>
<ul class="row">
<li class="item">One</li>
<li class="item">Two</li>
<li class="item">Three</li>
<li class="item">Four</li>
<li class="item">Five</li>
</ul>
</nav>
<div class="content row">
<div class="main">
<img src="http://placehold.it/1024x512/B4081E/ffffff/" width="100%" height="auto" alt="screenshot">
<p>Cause longer included relaxing deal world's if. Calories world's one style refreshing worthwhile win newer world's introducing better class.</p>
<p>Wholesome sleek below advanced crispy save spring elegent. Sold worthwhile spacious oily hearty. On screamin' tangy dazzling.</p>
<p>What appearance big credit-card bonus asked polished. More light sensible picky devour each appetizing newest duty people. Extra gigantic thank-you.</p>
<p>Absorbent vinyl thick industry now. Unique to thirsty absolutely settle smooth.</p>
</div>
<div class="aside"></div>
<div class="promo"></div>
</div>
<footer class="row">
<div class="columns">
<p>Twitter: this</p>
<p>Facebook: this</p>
<p>LinkedIN: this</p>
<p>Pinterest: this</p>
</div>
<div class="columns">
<p>Cause longer included relaxing deal world's if. Calories world's one style refreshing worthwhile win newer world's introducing better class.</p>
<p>Wholesome sleek below advanced crispy save spring elegent. Sold worthwhile spacious oily hearty. On screamin' tangy dazzling.</p>
<p>What appearance big credit-card bonus asked polished. More light sensible picky devour each appetizing newest duty people. Extra gigantic thank-you.</p>
<p>Absorbent vinyl thick industry now. Unique to thirsty absolutely settle smooth.</p>
</div>
<div class="columns"><p>© 2005 Flexbox inc.</p></div>
</footer>
</body>
</html>
`
I am confused why there is space on the left hand side of the menu

Most browsers have default styles. In your screenshot, the list inherits Chrome's default left padding and top and bottom margins.

Pseudo Class :hover stopped working but :focus still works CSS

I am programing a webpage with html and CSS. My pseudo class :hover stopped working on my webpage, but :focus still works. Hover was working fine, and then I made an unrelated edit (added an image to one of my blocks), and noticed it had stoped working. I deleated my last change and it still did not work.
I have checked everything and ran both the html and css through validators and there are no errors other than something about using character encoding, but I know it worked fine without that. It really makes no sense!
I will show my page and my code. Keep in mind this is my very first webpage, I know that I did not optimize my background images properly, and may have some unnecessary divs, but I feel pretty good about it considering a week ago I did not know what html was. I have heavily commented and organised my CSS, you can find my hover code near the top along with the rest of the none classes/ID's. The hover link is the only link on the webpage on the sidebar.
http://www.adrianhoulewebprojects.com/HomePage.html
Here is my HTML
<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
<title>Adrian Houle Web Projects</title>
</head>
<body>
<div id="Sidebar">
<h3>Projects</h3>
<ul>
<li>
Under Construction
</li>
<li>Unfinished Project #2</li>
<li>Unfinished Project #3</li>
<li>Unfinished Project #4</li>
<li>Unfinished Project #5</li>
</ul>
</div>
<div class="box">
<div class="HalfSpacer"></div>
<div class="TransBox" id="Header">
<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
</div>
<div class="Spacer"></div>
<div class="TransBox" id=About>
<h2>About:</h2>
<p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies.</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="NewStuff">
<h2>Coming Soon</h2>
<ul>
<li>
<h3>Australia Travel Blog</h3>
<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif" alt="Australian Flag" >
<p>2013-2014 Australia Travel Blog coming soon.</p>
</li>
</ul>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Contact">
<h2>Contact Info:</h2>
<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
<p>Adrian Houle</p>
<p>adrianhoule#gmail.com</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Footer">
<p>Website by Adrian Houle</p>
</div>
</div>
<div class="BottomBorder"></div>
</body>
</html>
Here is my CSS
/***************************************** Info *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
adrianhoule#gmail.com
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/
/************************************* Table of Contents **************************************************/
/*CSS layout*/
/* -none specific elements*/
/* -classes*/
/* -ID's and children of ID's*/
/* -Other*/
/************************************************************************************************************/
/************************************** CSS code ****************************************************/
/* -none specific elements ***********************************************************************************/
p {
font-size: large;
font-weight: bolder;
}
a {
color: blue;
}
a :hover, :focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
/* -classes **************************************************************************************************/
/*Element that contains everything except the sidebar and has the main background image.*/
.box {
display: block;
position: relative;
width: 100%; /*test and adjust to keep it from expading the browser*/
height: 100%;
border: 3px solid black;
right: 0;
top: 0px;
padding: 0;
background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
}
/*Allows for synchronised space adjustment between elements*/
.Spacer {
position :relative;
height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
position :relative;
height: 30px;
}
/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
width: 70%;
padding: 1em;
z-index: 1;
left: 20%;
position: relative;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.Italic {
font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/
/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
height: 100%;
width: 10%;
left: 0px;
top: 0px;
padding: 2%;
display: inline;
position: fixed;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
border-style: solid;
border-width: 3px;
z-index: 2;
}
#Sidebar ul {
padding-left:0;
}
#Sidebar li {
margin: 10%;
}
/*Header text*/
#Header h1 {
text-align: center;
}
#Footer p {
text-align: center;
}
/* -Other (empty)*****************************************************************************************/
Thank you for any help.

CSS is very touchy about putting extra spaces in it. Combine a with :hover like this:
a:hover, a:focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
Also want to make it a:focus unless you want every element to be affected.

Remove the space between a and :hover
a:hover{
background-color: yellow;
text-decoration: none;
font-size: larger;
}

Resources