I have a div which in 1000px; and a navigation bar which is also 1000px; but it doesn't extend as much as the div.
Please help...
[index.html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>[phantzm]</title>
<link rel="stylesheet" type="text/css" href="style.css">
<center>
<div class="banner">
<IMG SRC="logo.png" class="logo" WIDTH=100 HEIGHT=100 ALT="pZ">
</div>
<center>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>
fun stuff
<ul>
<li>jokes</li>
<li>riddles</li>
<li>facts</li>
</ul><!-- end of Second List -->
<li>
my work
</li>
<li>
my favourite songs
</li>
<li>
my favourite links
</li>
<li>
about me
</li>
<li>
contact me
<ul>
<li>phone</li>
<li>e-mail</li>
<li>mail</li>
</ul><!-- end of Second List -->
</li>
</li><!-- end of List Item -->
</ul><!-- end of Unordered List -->
</div><!-- end of navMenu div -->
</div><!-- end of wrapper div-->
</center>
</head>
<body bgcolor="#FFCECE">
</body>
</html>
[style.css]
body {
background: SILVER;
margin: 0;
padding: 0 auto;
}
.banner {
background: blue;
width: 1000px;
height: 70px;
}
.logo {
margin-top: 10px;
margin-right: 500px;
}
#navMenu {
margin: 0;
padding: 0;
line-height: 30px;
width: 1000px;
}
#navMenu ul {
margin: 0;
padding: 0;
border: 1px white;
}
#navMenu li:hover {
font-weight:normal;
text-transform: capitalize;
background:silver;
}
#navMenu ul li {
margin: 0;
padding: 0;
list-style:none;
float: left;
position: relative;
background: #4B8EE0;
border: 1px white;
border-left: 1px solid #0000ff;
border-right: 1px solid #000ff;
}
#navMenu ul: hover {
text-transform: capitalize;
}
#navMenu ul li a {
text-align: center;
font-family: "Arial";
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: white;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top:30px;
border: 1px white;
}
#navMenu ul li:hover ul {
visibility: visible;
}
I have added the code for the style and index.. As you can see both the banner and navmenu have 1000px;
Just change you CSS like this: Live Demo
#navMenu ul li {
margin: 0;
padding: 0;
list-style:none;
float: left;
position: relative;
background: #4B8EE0;
border: 1px white;
border-left: 1px solid #0000ff;
border-right: 1px solid #000ff;
width:165.6px;
}
165.6 is (1000 - 5)/6 (approx)
Using Chrome, right-click each element and choose "Inspect Element". Scroll down to "Metrics". This will show you what other properties are affecting the apparent width of each element (margin, border, padding, box-model, and positioning).
The navigation is not 1000px because each item is set to fixed width
You should change the width of each item using percentage, so the width of each item is relative to 1000px and the number of items
however, if it's still not working, you should add <div style="clear:both;"></div> at the bottom of <ul></ul>
The length of the navigation bar is decided by each individual bullet point in the list. Where you have width: 150px; shows the length of each individual li. The length of all of them together gives you the length of the navigation bar. You add display: inline-block; under the #navMenu ul li to make it depend on the original width.
Related
and thanks in advance,
I'm working on a css and html only (no js) menu for my website. I took the code from https://blog.logrocket.com/create-responsive-mobile-menu-with-css-no-javascript/ and adapted it. I have mostly succeeded, but have three issues I'm struggling with.
On the desktop version, I can't seem to set the children at the same height as their respective parents (I can either get the child to open at the top of the menu, or the bottom, but not in between).
On the mobile version, I want to force the children to stay open after they've been hovered on (otherwise it creates a huge disruption as the user gradually scrolls down the options in the menu (IE, the children close, shrinking the menu, while the user's scroller remains in the same place).
As the menu has a hidden checkbox to open/close the dropdown (on mobile), it only closes when clicked within the box. Is there a way without JS to close this anytime the user clicks outside the menu?
I am trying by all means NOT to use JS, if possible. Grateful for any advice.
STYLING FOR MENU
/* reset */
a{
text-decoration: none;
}
ul{
list-style: none;
}
li {
list-style-type: none;
}
/* Logo */
.logo{
display: inline-block;
color:#D7C9AA;
font-size: 1px;
}
/* Nav menu */
.nav{
width: 100%;
height: 100%;
}
.nav{
max-height: 0;
transition: max-height .5s ease-out;
}
/* Menu Icon */
.hamb{
cursor: pointer;
float: right;
padding: 20px 15px;
background-color:#7b2d26
}
.hamb-line {
background:white;
display: block;
height: 2px;
position: relative;
width: 24px;
}
.hamb-line::before,
.hamb-line::after{
background: white;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.hamb-line::before{
top: 5px;
}
.hamb-line::after{
top: -5px;
}
.side-menu {
display: none;
}
/* Toggle menu icon */
.side-menu:checked ~ nav{
max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
transform: rotate(-45deg);
top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
transform: rotate(45deg);
top:0;
}
/* Responsiveness */
#media (min-width: 881px) {
.nav{
max-height: none;
}
.hamb{
display: none;
}
.parent {
display:inline-block;
line-height:30px;
background-color:#D7C9AA;
border-right:#CCC 1px solid;}
.parent a{
margin: 20px;
color: #7b2d26;
font-weight:bold;
font-family: brandon-grotesque-1,brandon-grotesque-2,'Open Sans',Helvetica,Arial,sans-serif;
font-size:130%;}
.parent:hover > ul{
display:block;
position:absolute;}
.child {
display: none;}
.child li {
background-color:#ededed;
line-height: 40px;
border-bottom:#CCC 1px solid;
border-right:#CCC 1px solid; width:100%;
}
.child li a{
color: #7b2d26;
}
ul{
list-style: none;
margin: 0;
padding: 0px;
min-width:14em;
}
ul ul ul{
left:100%;
margin: 20px;
top:0;
margin-left:1px;}
li:hover {
background-color: #c3c3c3;}
.parent li:hover {
background-color: #c3c3c3;}
.expand{
font-size:14px; margin-right:5px;}
}
#media screen and (max-width:880px) {
.nav{
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
}
#menu {
margin-top:20px;
margin-left:0;
}
.parent {
display:block;
line-height:30px;
background-color:#ededed;
border-top:#CCC 1px solid;
border-bottom:#CCC 1px solid;
border-right:#CCC 1px solid;
padding-top:10px;}
.parent a{
margin: 16px;
color: #7b2d26;
text-decoration: none;
font-family: brandon-grotesque-1,brandon-grotesque-2,'Open Sans',Helvetica,Arial,sans-serif;
font-size:130%;}
.parent:hover > ul{
display:block;}
.child {
display: none;}
.child li {
background-color:#ededed;
line-height: 30px;
border-bottom:#CCC 1px solid;
border-right:#CCC 1px solid; width:100%;}
.child li a{
color: #7b2d26;}
ul{
list-style: none;
margin: 0;
padding: 0px;
min-width:4em;}
ul ul ul{
left: 100%;
top:0;
margin-left:10px;}
li:hover {
background-color: #c3c3c3;}
.parent li:hover {
background-color: #c3c3c3;}
.expand{
font-size:14px;text-align:center; margin-right:5px;}
}
*/CSS TO LOAD IMAGES IN HEADER, SHOULDN'T BE RELEVant
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- App title -->
<title>Responsive Pure CSS Menu</title>
<!-- Link CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navigation bar -->
<!-- Navigation bar -->
<header class="header">
<!-- Logo -->
LR
<!-- Hamburger icon -->
<input class="side-menu" type="checkbox" id="side-menu"/>
<label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
<!-- Menu -->
<!-- Menu -->
<nav class="nav">
<ul id="menu">
<li class="parent">What We Do
<ul class="child">
<li>Mission, Vision, Values</li>
<li class="parent">Our Programs<span class="expand">»</span>
<ul class="child">
<li>Education</li>
<li>Health</li>
<li>Resource Center</li>
</ul>
<li class="parent">Our Impact<span class="expand">»</span>
<ul class="child">
<li>Financials</li>
<li>Success Stories</li>
<li>Newsletters</li>
</ul>
</li>
</ul>
</li>
<li class="parent">Who We Are
<ul class="child">
<li class="parent">Meet The Young Women<span class="expand">»</span>
<ul class="child">
<li>Grantees Seeking Sponsors</li>
<li>Grantees with Sponsors</li>
<li>Graduates</li>
</ul>
<li>Meet The Support Team</li>
<li class="parent">Meet the Boards<span class="expand">»</span>
<ul class="child">
<li>Meet the Zambian Board</li>
<li>Meet the US Board</li>
</ul>
<li>Meet The Donors</li>
<li>Our Partners</li>
</li>
</ul>
</li>
<li class="parent">Get Involved
<ul class="child">
<li>Donate</li>
<li>Sponsor a Young Woman</li>
<li>Contact Us</li>
<li>Spread the Word</li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
<article>
<h1>
Some content
</h1>
<p>
More Content
</p>
</article>
</main>
</body>
</html>
the css dropdown is a variation of the one found at:
http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
When placed inside a dijit.layout.ContentPane, instead of floating, a scroll bar appears.
I've tracked the bug to this file:
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
But i fail to see the cause.
Below, the code.
<!-- File: css/dropdown.css-->
ul.dbtul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.dbtli {
float: left;
}
li.dbtli a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dbtli a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<style type="text/css">
html, body { height: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="css/dropdown.css"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<script>
var dojoConfig = {
parseOnLoad: true
}
require([
'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', "dojo/parser", "dojo/domReady!" ],
function(BorderContainer, ContentPane, parser) {
parser.parse();
});
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;" >
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<a id="linkDeRegreso" style="display:none;" href="#" class="controlesVolver"> << Volver a página anterior</a>
<div >
<ul class="dbtul">
<li class="dbtli"><a class="active" href="#home">Home</a></li>
<li class="dbtli">News</li>
<li class="dropdown">
123456
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
This is a result of the BorderContainer layout, which sets a fixed height for the ContentPane div. This div has the dijitContentPane class and claro.css has the following declarations for it:
.dijitContentPane {
display: block;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
You can override overflow to visible and your example will work but then you may run into layout problems when you add other elements to the container. I would suggest to just use a dijit MenuBar instead: https://dojotoolkit.org/reference-guide/1.10/dijit/MenuBar.html
I have a small gap between everything in my webpage and the browser's edge. I must have added some code that has done this, but am unsure what did. What do I do to remove this? Also in my navigation bar, the last link on the right hand side, has a small gap that is not highlighted on hover on the very edge on the right side of it.
I also need help with the gap between the navigation bar + header and the side banners. How do I remove that gap?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="headers_t">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
</span>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers_t{
/* Add something here */
}
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h, img{
display: block;
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Disregard the .headers_t id in the css, which I am editing right now...unless that's the cause.
The JSFiddle link is here.
You need to add margin:0px and padding:0px to your body CSS
so:
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
margin:0px;
padding:0px;
}
Here's my issue and I'll do my best to be clear here--
I have a simple website laid out in complete CSS using an external stylesheet.
I have a main container holding all of the elements for the website content; however, they all seem to be working except for the one that holds the actual page text and the businessbox. Right now, it's show the main containers background color (green) instead of what it should be (white). I'm positive it is something simple that I overlooked and will probably kick myself later, but thought I'd ask for a second pair of eyes.
Here is what I'm getting and what it should look like. If I'm having problems with this one container, hopefully programming the 3 vertical columns won't be an issue!
SCREENSHOT:
My stylesheet (style.css):
#charset "UTF-8";
/* CSS Document */
body {
background: #88b488;
margin: 3%;
font-family: Arial, Helvetica, sans-serif;
}
#container {
background: #006200;
width: 1020px;
margin: 0 auto;
}
#header {
background-image: url(img/BS_header.jpg);
background-repeat: no-repeat;
background-position:center;
width: 1020px;
height: 322px;
}
<!-- MENU ITEMS -->
#menu {
background: #25235b;
width: 100%;
z-index: 2;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0;
float: right;
margin-top: 15px;
margin-right: 5px;
}
#menu ul li{
padding: 5px;
position: relative;
float: left;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #006100;
}
#menu ul ul {
position: absolute;
margin-top: -1px;
right: 0px;
white-space: nowrap;
visibility: hidden;
}
#menu ul li:hover ul li{
visibility: visible;
color: #ffffff;
background-color: #afafaf;
padding: 0px;
}
<!-- CONTENT -->
#cbox{
width: 1020px;
background-color: #ffffff;
background-image:url(img/content_grad.jpg);
background-repeat: repeat-x;
}
#businessbox {
background-color: #006200;
width: 620px;
height: auto;
border-top: 3px solid #afafaf;
margin-top: 30px;
padding: 10px;
margin: 30px auto 0px;
}
.businesstitle {
text-align:center;
font-size: 20px;
color: #ffffff;
text-transform: uppercase;
font-style:italic;
}
.businesstext {
color: #ffffff;
font-size: 14px;
}
#footer {
font-size: 10px;
text-transform: uppercase;
color: #fff;
text-align: center;
padding: 10px;
background: #006100;
}
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Buy Local</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Hot Deals</li>
<li>Sign Up!</li>
<li>Resources
<ul>
<li>Events</li>
</ul>
</li>
</ul>
</div> <!--end of menu-->
</div> <!--end of header-->
<div id="cbox">
<div id="businessbox">
<div class="businesstitle">Our BUSINESS OF THE MONTH:</div><br />
<img src="#" width="150" height="90" style="float: left; padding-right: 10px;"/>
<div class="businesstext">You could be our next title sponsor and get your business in the spotlight with logo, name, and short blurb about your business.</div>
</div> <!--end of businessbox-->
</div> <!--end of cbox-->
<div id="footer">
2013 © Buy Local
</div><!--end of footer-->
</div><!--end of container-->
</body>
</html>
You've got HTML comments in your CSS. The browser is skipping rendering the line next to it so your #cbox and #menu styles are never applied. Remove the <!-- MENU ITEMS --> and <!-- CONTENT --> comments and this should work fine.
See this fiddle for that in action.
OP,
Why are you doing this: <img src="#" ... ?
Also, are any of your background-image urls resolving?
Like I said, it was the obvious--used the wrong commenting format and it caused the #cbox attribute to not function correctly.
Thanks for taking your time to help me with my silly problem!
Where you use image or background-image there use overflow: hidden; height: 1%; i think will solve your problem.
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