I have a pure CSS dropdown on our website. It works fine in Chrome, but in IE9, the child elements are to the right of the parent rather than below the parent.
CSS code:
/* drop down menus on front page */
ul#dropdown {
font-size: 14pt;
margin: 0;
padding: 0;
padding-top: 10px;
color: #92008f;
width: 100%;
font-family: Times New Roman, Georgia, Times;
z-index: 1;
}
ul#dropdown li, ul#dropdown li ul li {
list-style: none;
margin: 0;
padding: 0;
float: left;
position: relative;
overflow: visible;
width: 140px;
text-align: center;
z-index: 1;
}
li ul {
display: none;
list-style: none;
position: absolute;
font-size: 11pt;
width: 140px;
font-family: Times New Roman, Georgia, Times;
color: #000000;
overflow: auto;
background-color: #efdaef;
border: 1px solid #92008f;
margin: 0;
padding: 0;
z-index: 1;
}
li:hover ul {display: block;}
HTML:
<!DOCTYPE html>
<?php
$author='STARK HOUSE';
include 'header.php'; ?>
<div id="wrapper">
<ul id="dropdown">
<!-- STARK HOUSE -->
<ul>
<li><img src="images/downarrow.jpg" style="margin:0"> STARK HOUSE
<ul>
<li>Crime Book Club
<li>Newsletter
</ul>
</ul>
<!-- FANTASY -->
<ul>
<li><img src="images/downarrow.jpg" style="margin:0">FANTASY
<ul>
<li>Algernon Blackwood
<li>Catherine Butzen
<li>Storm Constantine
</ul>
</ul>
website: http://starkhousepress.com
thank you!
I believe that your problem is with IE7, I tested with IE9 and works fine:
try the code bellow (I tested on IE 7 8 9 and other.. works fine)
HTML:
<div id="wrapper">
<div id="dropdown">
<!-- STARK HOUSE -->
<div class="drop">
<div class="menu"><img src="http://starkhousepress.com/images/downarrow.jpg" style="margin:0"> STARK HOUSE </div>
<ul>
<li>Crime Book Club</li>
<li>Newsletter</li>
</ul>
</div>
<!-- FANTASY -->
<div class="drop">
<div class="menu"><img src="http://starkhousepress.com/images/downarrow.jpg" style="margin:0">FANTASY</div>
<ul>
<li>Algernon Blackwood</li>
<li>Catherine Butzen</li>
<li>Storm Constantine</li>
</ul>
</div>
</div>
</div>
CSS:
#dropdown {
font-size: 14pt;
margin: 0;
padding: 0;
padding-top: 10px;
color: #92008f;
width: 100%;
font-family: Times New Roman, Georgia, Times;
z-index: 1;
}
.drop {
display:inline-block;
width:140px;
vertical-align:top;
*display:inline;
}
.drop ul{
display:none;
}
.drop:hover ul {
display: block;
}
http://jsfiddle.net/vRRw8/8/
I hope to help you
Related
I have two specific questions concerning my website for my class.
First, my floating left-side vertical nav bar is getting in the way of the different sections on my theme/genre page of my website.
Whenever I go to this page, the nav bar by default is pushing my first section ("Horror") over to the right. This is good and I want ALL of my sections to permanently move to the right so that my nav bar will not be floating over any of my sections. However, right now only this first section is moved to the right and while the nav bar "floats" down, the nav bar either floats directly over the sections or the sections just get distorted and look weird.
Here is the Theme.html page code below. I only included the first "section" for brevity's sake.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="favicon-animated%20dice.ico" rel="icon" type="image/x-icon">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<title>Rolling Solo Theme/Genre</title>
<meta charset="utf-8">
<link rel="stylesheet" href="rollingsolo.css" type="text/css">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="js/float-panel.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<div id="header">
<h1>Rolling Solo</h1>
<h2>"I Roll Solo"</h2>
</div>
</header>
<div id="headings">
<h1>Board Games Theme & Genre</h1>
</div>
<div id="nav" class="float-panel">
<nav class="navigation"><!--Added .navigation-->
<ul class="mainmenu"><!--Added .mainmenu-->
<li>Home</li>
<li>Theme/Genre>
<ul class="submenu"><!--Added .submenu-->
<li>Horror</li>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Space</li>
<li>Nuclear Apocalypse</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<section id="Horror"class="sections"><h3>Horror</h3>
<hr>
<img src="theme/Arkham%20Horror-The%20Card%20Game(Medium).jpg" height="80" width="80" alt="arkham horror pic" class="images">
<p>Arkham Horror is a great deck building game.</p>
<br>
<img src="theme/Kingdom%20Death-Monster(medium).jpg" height="80" width="80" alt="kingdom death monster pic" class="images">
<p>This game was a mega-hit during its Kickstarter campaign last year. Extremely in demand and a great buy, if you can get your hands on it.</p>
<br>
</section>
I have looked in my CSS class "sections" and tried many times to move that blue border over to the right, but still cannot do it.
Here is my CSS code below for the theme/genre's sections and navigation code:
.sections {border-style: ridge; /*adjusts the Theme/Genre Sections*/
border-width: 10px;
border-color: #1D3D94;
padding-left: 20px;
padding-right: 20%;
overflow:auto;}
.images {float: left; /*adjust the pics in the Theme/Genre Sections*/
padding-top: 10px;
padding-right: 10px;}
#nav {float: left; width: 200px; margin: 10px 0;}
/* define a fixed width for the entire menu */
.navigation {width: 190px;}
/* reset the lists to remove bullet points and padding */
.mainmenu, .submenu {list-style: none;
padding: 0;
margin: 0;}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;}
/* add hover behavior */
.mainmenu a:hover {background-color: #C5C5C5;}
/* when hovering over a .mainmenu item,
display the submenu inside it.*/
.mainmenu li:hover .submenu {display: block;
max-height: 200px;}
/*Now, overwrite the background-color for .submenu links only.
.submenu a {background-color: #999;}
/* hover behavior for links inside .submenu */
.submenu a:hover {background-color: #666;}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.*/
.submenu {overflow: auto;
max-height: 0;
-webkit-transition: all 0.5s ease-out;}
Is there any way to permanently move these sections to the right out of the way of the nav bar?
Secondly, I do not want use a scroll bar function in the nested directoires but instead show ALL of my sections together when my mouse hovers over the "Theme/Genre >" heading in my nav bar. As of now, it only shows five of the seven sub-directories before having to use a scroll bar to scroll down to see the rest.
How do I remove the scroll bar and show ALL seven sub-directories?
Thanks a lot for any and all help you may give. I do appreciate it.
You could handle your submenu items with the css :hover states.
And you could place your menu and your content like this :
<div class="site-container">
<nav class="menu"><!-- Your menu--></nav>
<main><!-- Your main content--></main>
</div>
and add display: flex; on the .site-container.
Set the width: of your menu to 200px for example
And the width of the main content to calc(100% - 200px);
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
box-sizing: border-box;
}
.site-container {
display: flex;
flex-flow: row wrap;
}
.menu {
width: 200px;
}
.menu ul {
padding: 0;
background: #C5C5C5;
margin-top: 0;
list-style: none;
}
.menu nav > ul {
}
.menu ul li a {
display: block;
padding: 5px;
color: black;
font-weight: bold;
text-decoration: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li.has-child {
background: #5B5B5B;
}
.menu ul li.has-child li {
display: none;
background: #8E8E8E;
}
.menu ul li.has-child:hover li{
display: block;
}
main {
/*Total size minus the menu size*/
width: calc(100% - 200px);
padding: 10px;
}
main h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.theme-item {
border: 4px solid black;
padding: 20px;
margin-bottom: 50px;
}
.theme-title {
position: relative;
margin-bottom: 40px;
}
.theme-title:before {
position: absolute;
content: '';
display: block;
width: 80%;
height: 3px;
background: black;
top: calc(100% + 10px);
left: 0;
}
.games-list {
padding: 0;
list-style: none;
}
.games-list .game {
width: 100%;
margin-bottom: 30px;
}
/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
content: '';
display: table;
clear: both;
}
.games-list .game img {
float: left;
}
.games-list .game .description {
float: left;
padding-left: 15px;
}
<div class="site-container">
<div class="menu">
<nav>
<ul>
<li>Home</li>
<li class="has-child">
Theme/Genre
<ul>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Horror</li>
<li>Action</li>
<li>Aventure</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>Board Games Themes & Genre</h1>
<div class="theme-list">
<div class="theme-item">
<h2 class="theme-title">Horror</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
<div class="theme-item">
<h2 class="theme-title">Sci-Fi</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
</div>
</main>
</div>
You could do an improvement by fixing your menu at the top left of the screen with position: fixed; top: 0; left: 0; z-index: 2;, so it's always visible. And set position: absolute; left:100%; top: 0; on the submenu and position: relative; on its parent li, so the submenu will appears at the right of your menu. It will prevent the menu from doing "Yo-yo".
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
box-sizing: border-box;
}
.site-container {
position: relative;
}
.menu {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 200px;
}
.menu ul {
padding: 0;
background: #C5C5C5;
margin-top: 0;
list-style: none;
}
.menu ul li a {
display: block;
padding: 5px;
color: black;
font-weight: bold;
text-decoration: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li.has-child {
background: #5B5B5B;
position: relative;
}
.menu ul li.has-child ul {
display: none;
background: #8E8E8E;
position: absolute;
left: 100%;
top: 0;
}
.menu ul li.has-child:hover ul{
display: block;
}
main {
padding-left: 210px;
padding-right: 10px;
}
main h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.theme-item {
border: 4px solid black;
padding: 20px;
margin-bottom: 50px;
}
.theme-title {
z-index: 1;
position: relative;
margin-bottom: 40px;
}
.theme-title:before {
position: absolute;
content: '';
display: block;
width: 80%;
height: 3px;
background: black;
top: calc(100% + 10px);
left: 0;
}
.games-list {
padding: 0;
list-style: none;
}
.games-list .game {
width: 100%;
margin-bottom: 30px;
}
/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
content: '';
display: table;
clear: both;
}
.games-list .game img {
float: left;
}
.games-list .game .description {
float: left;
padding-left: 15px;
}
<div class="site-container">
<div class="menu">
<nav>
<ul>
<li>Home</li>
<li class="has-child">
Theme/Genre
<ul>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Horror</li>
<li>Action</li>
<li>Aventure</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>Board Games Themes & Genre</h1>
<div class="theme-list">
<div class="theme-item">
<h2 class="theme-title">Horror</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
<div class="theme-item">
<h2 class="theme-title">Sci-Fi</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
</div>
</main>
</div>
Use padding-left
Make sure the items that are listed are sitting in a 'container' so that all the children inside the container can sit wherever the parent sits. This allows you to use the following CSS rules for content (with the id of #content for example):
#content {
position: relative;
padding-left: 5em;
box-sizing: border-box;
width: 100%;
}
Explanation
position: relative - make sure the children abide by the basic rules of the parent
padding-left: 5em - Push the parent (content) to the right of the menu by 5em, all children will be relative to the parent
box-sizing: border-box - keep all the padding relative to the inside the width and height of the container (by subtracting the size) rather than appending size dynamically.
width: 100% - Let the container fill the rest of the space (1)
1) if width: 100% is over-taking the space of the menu then consider using width: calc(100% - 5em) where 5em is the width of the menu
Note It's worth putting into consideration that to do this you normally need a fixed/max-width menu and would be ideal to do so. Otherwise text, images and so on may expand the menu infinitely within a percentage of that space.
element:hover
To eliminate the scrollbar on the menu you will have to find what is taking up the space. If these are more items that you want to show/hide when the cursor is above the menu item you can use the element selector :hover which can tell the menu to hide certain items. You can then use it to set before the hover event occurs and during the hover event. For example:
body { background: white; }
body:hover {background: red;}
A more relative example would be to set the height of the main menu item so that the rest cannot be shown (with the use of overflow: hidden)
ul li ul li {display: none};
ul li:hover ul li {display: block}
<body>
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul id="navigation">
<li id="nav_home">Home</li>
<li id="nav_gallery">Gallery</li>
<li id="nav_shows">Shows</li>
<li id="nav_contact us">Contact us</li>
</ul>
</div>
</div>
<div id="container2">
<div id="background">
</div>
</div>
</body>
Css :
#nav{
text-align: right;
margin-top: none;
}
#navigation{
list-style: none;
display: inline-block;
margin-left: 10px;
font-size: 17px;
font-family: monospace;
float: right;
position: relative;
}
I can not figure out why it is not working. When I try closing the div header tag after the list (bar) it appears above the logo image. And it is currently like this:
EDIT: How to specify a style for this exact line? I tried anything but i couldn't, due to the fact that with DIV it gets under the whole Anime of the week - http://gyazo.com/5c9c6b57cd7097edc719b09a8bbfdd1d
Try this and then arrange the padding as per required :-
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
}
<div id="navcontainer">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
</div>
Make necessary changes to replicate the block of CSS code below:
#nav {
margin-top: none;
width: 500px; /* Define a width for the parent cont*/
}
#navigation {
width: 100%; /* Adjsut as needed */
}
#navigation li {
display: inline-block;
list-style: none;
padding: 15px;
}
See working example here
Important: If the logo and the nav are both inside one container, find out what's left of the container after the width of the logo and use it as the with of the nav.
I have a simple question. I'm trying to display the elements for "about" "general" and "social-buttons" classes within a nested unordered list. I want these to appear horizontal and inline with each other. I want them to be side by side basically, not vertical. If you can help me figure out which selector I need to add the 'display:inline' block, that would be much useful.
<div class="footer-container">
<div id="footer_menu">
<div id="footer-copy">
<li class="about-blurb">
<h3>Viral DNA</h3>
<ul>
<li>
<p>Virael Marketing is the leading digital marketing blog for the social web. We are a one-stop hub to help you learn from your viral marketing campaigns, offer tips & tricks, and build the best digital marketing teams.</p>
</li>
</ul>
<li class="General">
<h3>General</h3>
<ul>
<li><a class="button" href="#">Media</a></li>
<li><a class="button" href="#">Resources</a></li>
<li><a class="button" href="#">Blog</a></li>
<li><a class="button" href="#">Store</a></li>
<li><a class="button" href="#">Contact</a></li>
</ul>
<li class="social-icons">
<h3>Follow Virael</h3>
<ul>
<li>
<!--social media buttons go here-->
</li>
</ul>
</ul>
</div>
</div>
The CSS:
.footer-container {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'MyriadPro', Arial, sans-serif;
float: left;
text-align: left;
width: 828px;
text-transform: capitalize;
background-color: #4169E1;
color: #FFF;
position: relative;
bottom: 0;
left: 269px;
border-top: 10px solid #B0C4DE;
overflow: hidden;
z-index=-1000;
}
.footer-container h3 {
text-align:justify;
}
#footer_menu {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'MyriadPro', Arial, sans-serif;
list-style-type:none;
z-index=-1000;
}
#footer_menu ul {
margin: 0px 30px;
padding: 10px 30px;
list-style-type:none;
text-decoration:none;
display:inline;
z-index=-1000;
}
#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
z-index=-100;
display:block;
color: white;
clear:both;
}
#footer_menu .about-blurb ul li {
width: 200px;
height: auto;
text-align:justify;
}
Replace your css with mine. Live example here
#footer_menu ul {
/* margin: 0px 30px; */
padding: 10px 30px;
list-style-type: none;
text-decoration: none;
display: inline;
}
#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
display: inline-block;
color: white;
clear: both;
}
Remove margins from the ul and add inline-block to li
I am working on styling a Twitter Feed Javascript for my layout. The issue is, when I float the date and interaction links, the border that's supposed to surround all the parts of the particular tweet ignores the date and interaction divs, causing the border to overlap with them.
Is there any way to remedy this issue. The issue can be viewed here (at the bottom of the page): http://www.noellesnotes.com
Relevent Code:
HTML
<div id="tweets">
<ul>
<li>
<p class="tweet">The tweet.</p>
<p class="timePosted">TIME</p>
<p class="interact">INTERACT LINKS</p>
</li>
</ul>
</div>
CSS
.tweet, .tweet a, .tweet span, .interact a{
margin-bottom: 10px;
font-size: 12px;
font-family: 'Open Sans', sans-serif, Georgia, sans-serif;
word-wrap:break-word;
}
.timePosted{
width:40%;
font-size: 12px;
float: left;
font-weight: bold;
text-align: left;
}
.interact{
width:60%;
font-size: 12px;
float: left;
text-align: right;
overflow: hidden;
}
.interact a{
margin-right: 3px;
text-decoration: underline;
font-family: 'Arvo', Georgia;
}
#tweets ul{
margin-left: 0;
padding-left: 0;
list-style: none;
}
#tweets ul li{
border: 3px solid rgba(255,255,255,0.4);
margin: 3px 0;
padding: 3px;
}
This is the case for a clearfix div.
HTML:
<div id="tweets">
<ul>
<li class="clearfix"> <!-- clearfix class added here -->
<p class="tweet">The tweet.</p>
<p class="timePosted">TIME</p>
<p class="interact">INTERACT LINKS</p>
</li>
</ul>
</div>
CSS:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* for IE/Mac */
display: inline-block;
}
There are a few other clearfix solutions I recommend searching to find and use the one that works best for your needs.
This question already has answers here:
How to remove indentation from an unordered list item?
(10 answers)
Closed 7 years ago.
For some reason in my footer there's a space to the left of my ul so it isn't lined up with the content above it (membership text etc) If I were to put text outside this ul (but still within the footer wrapper) there is no such space.
Here's what it looks like:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ozanam Club </title>
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/fonts/enigma.css" />
</head>
<body>
<div id="wrap">
<header>
<div id="logo"><img src="images/logo.png" height="157px" width="237px"></div>
<!--
<div class="social">
<ul>
<li><img src="images/icons/facebook.gif"/></li>
<li><img src="images/icons/twitter.gif"/></li>
<li><img src="images/icons/youtube.gif"/></li>
</ul>
</div>
-->
<div id="navigation">
<ul>
<li>Home</li>
<li>Events</li>
<li>Clubs</li>
<li>Photos</li>
<li>F.A.Q</li>
<li>Contact</li>
</ul>
</div>
</header>
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slider/image1.gif" />
</li>
<li>
<img src="images/slider/image2.gif" />
</li>
<li>
<img src="images/slider/image3.gif" />
</li>
</ul>
</div>
</section>
<div class="main">
<h1>Ozanam Club</h1>
<p>The first Ozanam Club was started in May 1989 by James Lynch, a member of the
St. Vincent De Paul society who himself had two children with learning difficulties
and who was concerned at the general lack of leisure provision for them.</p>
<p>The Ozanam Club is a Special Works Conference of the St. vincent De Paul Society.
The name of the clubs are called after Blessed Frederick Ozanam who is the founder
of the S.S.V.P. At this present time we have two clubs in Viewpark, an adults club
and a seperate club for younger members. We have an adults club in Hamilton and
Paisley and also a club in Carfin for younger members. </p>
<h1>Membership</h1>
<p>Membership is open to anyone who has disablities, regardless of their race or religious belief.</p>
<p>The aim of the clubs are a fun night out for our members and some temporary respite for parents. All of the clubs are run solely by volunteers who are disclosure checked prior to working with
vulnerable adults/children.</p><p> They are also made aware of the Adults/Children Protection Procedures and encouraged to attend an information session.</p>
<p>You can find more information on our a F.A.Q page.</p>
</div>
<div class="side">
<img src="images/events.gif" alt="Events" />
View
</div>
<div class="side">
<img src="images/photos.gif" alt="Events" />
View
</div>
</div>
<footer>
<div id="footer-wrap">
<ul>
<li>Home</li>
<li>Events</li>
<li>Clubs</li>
<li>Photos</li>
<li>F.A.Q</li>
<li>Contact</li>
</ul>
</div>
</footer>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script defer src="js/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</body>
</html>
CSS:
body {background: white; background: url('../images/grunge.png'); font-family: 'EnigmaticRegular';}
#wrap {margin: 0 auto; width: 100%; max-width: 1000px;}
header {position: relative;}
#logo {margin: 20px 0 0 0; display: block; float: left;}
.social ul { z-index: 1; list-style: none; position: absolute; top: 0; right: 0;}
.social li { float: left;}
.social img { height: 35px; width: 35px;}
#navigation { width: 100%; max-width: 1000px; height: 200px; position: relative; }
#navigation ul { padding: 0.5em; background: white; border-radius: 5px; border-bottom: solid 3px #3c88bc; display: inline-block; position: absolute; bottom: 0; right: 0;}
#navigation li { padding-left: 0.5em; padding-right: 0.5em; list-style: none; font-style: none; font-family: 'EnigmaticBold'; border-right: solid 1px black;}
#navigation li:last-child { border: 0;}
#navigation ul,
#navigation li {float: left;}
#navigation a { color: #195c8a; text-decoration: none; font-weight: bold;}
#navigation a:hover { color: #13405f;}
.main { float: left; margin-top: 20px; width: 625px;}
.main h1 {font-family: 'EnigmaticBold'; color: #13405f; }
.main p {color: #13405f;}
.main a {color: inherit; }
.side {float: right; margin-top: 20px; border-radius: 10px; margin-bottom: 10%; }
.side a { text-decoration: none; color: #3c88bc;}
.button { font-size: 14px;font-family: 'EnigmaticBold'; display: block; width: 100px; margin: 0 auto; text-align: center; background: #fff; padding: 5px; border-radius: 10px; border-bottom: solid 3px #3c88bc;}
footer { height: 100px; background: #195c8a; clear: both; }
#footer-wrap {margin: 0 auto; padding: 0; width: 100%; max-width: 1000px; }
#footer-wrap li { float: left; list-style: none; padding-right: 3em;}
#footer-wrap a {color: white ;text-decoration: none;}
The <ul> element has browser inherent padding & margin by default. In your case, Use
#footer ul {
margin: 0; /* To remove default bottom margin */
padding: 0; /* To remove default left padding */
}
or a CSS browser reset ( https://cssreset.com/ ) to deal with this.
I don't see any margin or margin-left declarations for #footer-wrap li.
This ought to do the trick:
#footer-wrap ul,
#footer-wrap li {
margin-left: 0;
list-style-type: none;
}
by default <UL/> contains default padding
therefore try adding style to padding:0px in css class or inline css