big gray box on screen - html

There's a gray box on the middle of my website. I've double checked all of the code, and I can't figure out what's creating this. I'm sorry for asking such a stupid question, I'm quite new to this. Here's the code -
.nav a {
color: black;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhoood-guides {
border-bottom: 1px solid #dbdbdb
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#fff;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
}
.menu a {
transition:all linear 0.15s;
color:black;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:dodgerblue;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:11px;
}
.menu > ul > li > a {
padding:10px 10px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
text-transform:uppercase;
font-weight:bold;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#fff;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#fff;
}
.sub-menu li {
display:block;
font-size:11px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
text-transform: uppercase;
font-weight:bold
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#fff;
}
.neighborhood-guides h2 {
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.neighborhood-guides p {
font-size: 24px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.socialmedia {
background: #498FCC;
}
.neighborhood-guides {
padding: 20px 20px;
}
.allrights li p {
color: white;
font-family: 'Shift', sans-serif;
}
.whole {
background-image:url('http://i.imgur.com/3ay8hjS.jpg');
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<div class="whole">
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>About Us</li>
<li> Contact Us</li>
<li>
Destinations <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Airlines</li>
<li>Hotels</li>
</ul>
</li>
<li>Cruiselines</li>
<li>Weddings & Honeymoons</li>
<li>
Useful Information <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Travel Insurance</li>
</ul>
</li>
<li>Careers</li>
</ul>
</nav>
</div>
<div class="jumbotron">
<div class="container">
</div>
</div>
<center>
<h2></h2>
<p></p>
<h1></h1>
<div class="row">
<div class="col-md-4">
<div class="Thumbnail">
<img src="">
</div>
</div>
<div class="col-md-4">
<div class="Thumbnail">
<img src="">
</div>
</div>
<div class="col-md-4">
<div class="Thumbnail">
<image src="">
</div>
</div>
</div>
</center>
<center>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3></h3>
<p></p>
<p></p>
</div>
<div class ="col-md-4">
<h3></h3>
<p>.</p>
<p></p>
</div>
<div class ="col-md-4">
<h3></h3>
<p></p>
<p></p>
</div>
</div>
</div>
</center>
</div>
<div class="socialmedia">
<nav class="menu">
<ul class="clearfix">
</ul>
</nav>
</div>
<center>
<h2></h2>
<h2></h2>
<h2></h2>
</center>
<h2></h2>
<h2></h2>
<div class="socialmedia">
<nav class="menu">
<ul class="clearfix">
<div class="allrights">
<center><li><p>Travel Away Corporation All Rights Reserved 2015</p></li></center>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>


Remove the following attribute: background-color: #eee; */, otherwise, I've put your same code on the fiddle and didn't see any issue.
Replace your .jumbotron class with this
.jumbotron {
padding: 30px;
margin-bottom: 30px;
color: inherit;
}
Whenever you have such a problem, right click on your mouse and select Inspect element and then click on the html element (which has css applied on it) and see which properties are checked and which are not. You should easily fix your problem then.


This is a broad question because you don't say what you want to appear there instead of this large grey square, but to answer your specific question: remove the jumbotron markup from the HTML and it will disappear:
.nav a {
color: black;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhoood-guides {
border-bottom: 1px solid #dbdbdb
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#fff;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
}
.menu a {
transition:all linear 0.15s;
color:black;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:dodgerblue;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:11px;
}
.menu > ul > li > a {
padding:10px 10px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
text-transform:uppercase;
font-weight:bold;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#fff;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#fff;
}
.sub-menu li {
display:block;
font-size:11px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
text-transform: uppercase;
font-weight:bold
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#fff;
}
.neighborhood-guides h2 {
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.neighborhood-guides p {
font-size: 24px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.socialmedia {
background: #498FCC;
}
.neighborhood-guides {
padding: 20px 20px;
}
.allrights li p {
color: white;
font-family: 'Shift', sans-serif;
}
.whole {
background-image:url('http://i.imgur.com/3ay8hjS.jpg');
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<div class="whole">
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>About Us</li>
<li> Contact Us</li>
<li>
Destinations <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Airlines</li>
<li>Hotels</li>
</ul>
</li>
<li>Cruiselines</li>
<li>Weddings & Honeymoons</li>
<li>
Useful Information <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Travel Insurance</li>
</ul>
</li>
<li>Careers</li>
</ul>
</nav>
</div>
<center>
<h2></h2>
<p></p>
<h1></h1>
<div class="row">
<div class="col-md-4">
<div class="Thumbnail">
<img src="">
</div>
</div>
<div class="col-md-4">
<div class="Thumbnail">
<img src="">
</div>
</div>
<div class="col-md-4">
<div class="Thumbnail">
<image src="">
</div>
</div>
</div>
</center>
<center>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3></h3>
<p></p>
<p></p>
</div>
<div class ="col-md-4">
<h3></h3>
<p>.</p>
<p></p>
</div>
<div class ="col-md-4">
<h3></h3>
<p></p>
<p></p>
</div>
</div>
</div>
</center>
</div>
<div class="socialmedia">
<nav class="menu">
<ul class="clearfix">
</ul>
</nav>
</div>
<center>
<h2></h2>
<h2></h2>
<h2></h2>
</center>
<h2></h2>
<h2></h2>
<div class="socialmedia">
<nav class="menu">
<ul class="clearfix">
<div class="allrights">
<center><li><p>Travel Away Corporation All Rights Reserved 2015</p></li></center>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>

Related

Need to adjust footer in HTML and CSS

I need to adjust footer like the image shown below in four columns as it is. Trying to do but the last two columns are not meeting like the first as shown in the image. Tried to make them in a single row with four columns but unable to adjust it like the sample image shown below. Please help with this.
HTML CODE:
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<h6>Categories</h6>
<ul class="footer-links">
<li>C</li>
<li>UI Design</li>
<li>PHP</li>
<li>Java</li>
<li>Android</li>
<li>Templates</li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<h6>Quick Links</h6>
<ul class="footer-links">
<li>About Us</li>
<li>Contact Us</li>
<li>Contribute</li>
<li>Privacy Policy</li>
<li>Sitemap</li>
</ul>
</div>
</div>
<hr>
</div>
<h2>Join our newsletter</h2>
<h6>Join our newsletter and Stay informed to latest news and events</h6>
<div id=footer>
<input type="text" id="fname" name="firstname" placeholder="Enter your Email:">
<input type="submit" value="Submit">
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<img src="http://cache1.artprintimages.com/images/jump_pages/rebrand/footer/fb.png" href="#">
<p class="copyright-text">Excoboard extended community 2014 | Privacy Policy
</p>
</div>
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
CSS CODE:
input[type=text] {
width: 15%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 15%;
background-color: #0000FF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
#footerabout {
border-radius: 5px;
padding: 20px;
}
.site-footer
{
background-color:#26272b;
padding:45px 0 20px;
font-size:15px;
line-height:24px;
color:#737373;
}
.site-footer hr
{
border-top-color:#bbb;
opacity:0.5
}
.site-footer hr.small
{
margin:20px 0
}
.site-footer h6
{
color:#fff;
font-size:16px;
text-transform:uppercase;
margin-top:5px;
letter-spacing:2px
}
.site-footer a
{
color:#737373;
}
.site-footer a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links
{
padding-left:0;
list-style:none
}
.footer-links li
{
display:block
}
.footer-links a
{
color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links.inline li
{
display:inline-block
}
.site-footer .social-icons
{
text-align:right
}
.site-footer .social-icons a
{
width:40px;
height:40px;
line-height:40px;
margin-left:6px;
margin-right:0;
border-radius:100%;
background-color:#33353d
}
.copyright-text
{
margin:0
}
#media (max-width:991px)
{
.site-footer [class^=col-]
{
margin-bottom:30px
}
}
#media (max-width:767px)
{
.site-footer
{
padding-bottom:0
}
.site-footer .copyright-text,.site-footer .social-icons
{
text-align:center
}
}
.social-icons
{
padding-left:0;
margin-bottom:0;
list-style:none
}
.social-icons li
{
display:inline-block;
margin-bottom:4px
}
.social-icons li.title
{
margin-right:15px;
text-transform:uppercase;
color:#96a2b2;
font-weight:700;
font-size:13px
}
.social-icons a{
background-color:#eceeef;
color:#818a91;
font-size:16px;
display:inline-block;
line-height:44px;
width:44px;
height:44px;
text-align:center;
margin-right:8px;
border-radius:100%;
-webkit-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
color:#fff;
background-color:#29aafe
}
.social-icons.size-sm a
{
line-height:34px;
height:34px;
width:34px;
font-size:14px
}
.social-icons a.facebook:hover
{
background-color:#3b5998
}
.social-icons a.twitter:hover
{
background-color:#00aced
}
.social-icons a.linkedin:hover
{
background-color:#007bb6
}
.social-icons a.dribbble:hover
{
background-color:#ea4c89
}
#media (max-width:767px)
{
.social-icons li.title
{
display:block;
margin-right:0;
font-weight:600
}
}

I created a drop down list and it won't move to the top of the screen?

hey I'm a beginner of html & Css and i couldn't find a solution for my problem
i tried to fix it many times by adding different positions but it just ruins it more.
so i searched every where and there wasn't any solution of my exact problem, i just started 2 days ago so if u can give me any tips for fixing such problem i will highly appreciated.
here is my code:
*{margin: 0%; padding: 0%;}
#whole {
color: white;
font-family: Arial Narrow;
}
#img1
{width:250px;height:250px;
position:absolute; top:10px; left:6px;
}
#small { font-size:30px; text-shadow: 3px 3px 3px black;
padding-left: 24px; padding-bottom:40px;
position:absolute; top:290px}
#bird {font-size:45px; text-shadow: 3px 3px 3px black;
padding-left: 61px;
position:absolute;top:250px;left:27px}
#img2
{width:1600px; height:380px;
}
#menu ul ol
{
float:left;
width:200px ;
height:px;
background-color:red;
opacity:.9;
line-height: 40px;
text-align:center;
font-size:20px;
color: white;
}
#menu ul ol {
}
#menu ul ol a {
text-decoration:none;
color:white;
display:block;}
ul ol a:hover {
background-color:#89cff0;
}
ul ol ul ol {
display:none;
}
ul ol:hover ul ol{
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>not avaliable</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<div id="whole">
<body>
<h1 id="bird">Scar</h1>
<h3 id="small">For digtil Markting</h3>
<img src="imgs/head.jpg" id="img2">
<img src="imgs/web.png" id="img1">
</body>
</div>
<header class="pro">
</header>
<div id="menu">
<ul>
<ol>About us
<ul>
<ol><a>Mission</a></ol>
<ol><a>Out team</a></ol>
<ol><a>Creators</a></ol>
</ul>
</ol>
<ol>Services
<ul>
<ol><a>Wbsites</a></ol>
<ol><a>Themes</a></ol>
<ol><a>Security</a></ol>
<ol><a>Cost</a></ol>
</ul>
</ol>
<ol>Contact</ol>
<ol>Careers</ol>
</ul>
</div>

I m not sure till end what you what and how you want it to look. ..
But i edited your code like this maybe it helps:
Also as Mihai T told: Your html structure is wrong.
*{margin: 0%; padding: 0%;}
#whole {
color: white;
font-family: Arial Narrow;
}
#img1
{width:250px;height:250px;
//position:absolute; top:10px; left:6px;
}
#small { font-size:30px; text-shadow: 3px 3px 3px black;
padding-left: 24px; padding-bottom:40px;
position:absolute; top:290px}
#bird {font-size:45px; text-shadow: 3px 3px 3px black;
padding-left: 61px;
position:absolute;top:250px;left:27px}
#img2
{width:1600px; height:380px;
}
#menu {
position: absolute;
}
#menu ul ol
{
float:left;
width:200px ;
height:px;
background-color:red;
opacity:.9;
line-height: 40px;
text-align:center;
font-size:20px;
color: white;
}
#menu ul ol {
}
#menu ul ol a {
text-decoration:none;
color:white;
display:block;}
ul ol a:hover {
background-color:#89cff0;
}
ul ol ul ol {
display:none;
}
ul ol:hover ul ol{
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>not avaliable</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="whole">
<div id="menu">
<ul>
<ol>About us
<ul>
<ol><a>Mission</a></ol>
<ol><a>Out team</a></ol>
<ol><a>Creators</a></ol>
</ul>
</ol>
<ol>Services
<ul>
<ol><a>Wbsites</a></ol>
<ol><a>Themes</a></ol>
<ol><a>Security</a></ol>
<ol><a>Cost</a></ol>
</ul>
</ol>
<ol>Contact</ol>
<ol>Careers</ol>
</ul>
</div>
<div>
<h1 id="bird">Scar</h1>
<h3 id="small">For digtil Markting</h3>
<img src="imgs/head.jpg" id="img2">
<img src="imgs/web.png" id="img1">
</div>
</div>
</body>

Footer Alignment Issue - Can't Align Everything to the Left

I am creating a footer. Almost everything is finished. However, I can't align the "ul" elements perfectly. More specifically, I can't align the elements to the left. Please, take a look at my pen.
https://codepen.io/john9929/pen/yvrWpP
As you can see the sprouts under "CONTACT" and "About us," "Contact us" etc under "INFORMATION" are not aligned perfectly to the left.
Here are my codes for footer:
<!-- footer -->
<div class="footer">
<div class="container">
<div class="w3_footer_grids">
<div class="col-md-3 w3_footer_grid">
<h3>Contact</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
<ul class="address">
<li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>1234k Avenue, 4th block, <span>New York City.</span></li>
<li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i>info#example.com</li>
<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>+1234 567 567</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>Information</h3>
<ul class="info">
<li>About Us</li>
<li>Contact Us</li>
<li>Short Codes</li>
<li>FAQ's</li>
<li>Special Products</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>Category</h3>
<ul class="info">
<li>Mobiles</li>
<li>Laptops</li>
<li>Purifiers</li>
<li>Wearables</li>
<li>Kitchen</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>Profile</h3>
<ul class="info">
<li>Home</li>
<li>Today's Deals</li>
</ul>
<h4>Follow Us</h4>
<div class="agileits_social_button">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="footer-copy">
<div class="footer-copy1">
<div class="footer-copy-pos">
<img src="images/arrow.png" alt=" " class="img-responsive" />
</div>
</div>
<div class="container">
<p>© 2017 Electronic Store. All rights reserved </p>
</div>
</div>
</div>
<!-- //footer -->
Here are the CSS codes:
/*-- footer --*/
.footer{
padding:4em 0;
background:#fff;
}
.w3_footer_grid h3{
color: #212121;
font-size: 1.5em;
margin-bottom: 2em;
padding-bottom: .5em;
position: relative;
text-transform: uppercase;
}
.w3_footer_grid h3:after{
content:'';
background:#3c43a4;
width:20%;
height:2px;
position:absolute;
bottom:0;
left:0;
}
.w3_footer_grid p{
color:#999;
line-height:1.8em;
margin-bottom:2em;
}
.w3_footer_grid ul li {
list-style-type: none;
margin-bottom: 1em;
color: #999;
font-size: 14px;
}
.w3_footer_grid ul.address li i {
color:#414141;
border: 1px solid #414141;
padding: .5em;
margin-right: 1em;
}
.w3_footer_grid ul.address li span {
display: block;
margin-left: 3em;
}
.w3_footer_grid ul li a {
color: #999;
text-decoration: none;
}
.w3_footer_grid ul li a:hover {
color:#212121;
}
.w3_footer_grid ul.info li a {
padding-left:2.2em;
background: url(../img/img-sp.png) no-repeat -6px -98px;
}
.w3_footer_grid h4{
margin:2em 0 1em;
font-size:1.2em;
color:#3c43a4;
}
/*-- social-buttons --*/
.agileits_social_button ul li{
display:inline-block;
margin: 0 !important;
}
.agileits_social_button ul li a{
background: url(../img/img-sp.png) no-repeat 1px -130px #414141;
display: block;
width: 35px;
height: 35px;
-webkit-transition:.5s all;
-moz-transition:.5s all;
-o-transition:.5s all;
-ms-transition:.5s all;
transition:.5s all;
}
.agileits_social_button ul li a.twitter{
background-position:-41px -130px;
}
.agileits_social_button ul li a.google{
background-position:-81px -130px;
}
.agileits_social_button ul li a.pinterest{
background-position:-123px -130px;
}
.agileits_social_button ul li a:hover {
background-color: #3c43a4;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.footer-copy1 {
position: relative;
padding: 2em 0 0;
border-bottom: 1px solid #d6d6d6;
}
.footer-copy-pos {
position: absolute;
right: 12%;
bottom: -75%;
width: 50px;
height: 50px;
border: 3px solid #ff5063;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
-ms-border-radius: 25px;
box-shadow: 0px 0px 5px 0px #ff5063;
-webkit-transition:.5s all;
-moz-transition:.5s all;
transition:.5s all;
}
.footer-copy-pos:hover {
box-shadow: 0px 0px 30px 5px #ff5063;
}
.footer-copy p{
margin:4em 0 0;
text-align:center;
color:#999;
line-height:1.8em;
}
.footer-copy p a{
color:#3c43a4;
text-decoration:none;
}
.footer-copy p a:hover{
color:#999;
}
/*-- //footer --*/
How can I fix this issue?

Try the following code:
.w3_footer_grid ul{
padding-left:0;
}

Your question is not very precise. You want all your <li> elements all the way to the left? Then remove the padding you have given it here:
.w3_footer_grid ul.info li a {
padding-left:2.2em;
background: url(../img/img-sp.png) no-repeat -6px -98px;
}

How to fix the alignment of the navigation items?

I'm having an issue where I can't see to get the 'Log in' text to be aligned with the rest of the navigation bar. Using margin or padding doesn't seem to push it up at all, and I managed to get it 3 pixels out by using line-height:0 but it wasn't enough. Ideas?
This is the design that I'm trying to achieve.
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="EvositeCSS.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<script src="EvositeJS.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court">
</div>
<div class="ActivePage">
<img src="Images/Triangle.PNG"> </img>
</div>
<div class= "LoginContainer">
<div class="DownTriangle">
<span class="glyphicon glyphicon-triangle-bottom" </span>
</div>
<h1 class="LoginTxt">Log in </h1>
</div>
<ul>
<li> <a href="Evosite.html" class="NavHome" id="Current")> Home </a> </li>
<li> News </li>
<li> Tenants </li>
<li> Heritage </li>
<li> About Us </li>
<li> Book the Meeting Room </li>
<li> Contact Us </li>
</ul>
</div> <!-- Ends NavBar <-->
</div> <!-- Ends wrapper -->
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.wrapper {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.VictoriaHouse {
padding-left:270px;
padding-top:20px;
padding-bottom:20px;
padding-right:140px;
float:left;
}
/* NavBar formatting */
.NavBar {
float:inline-block;
text-decoration:none;
}
ul {
float:inline-block;
padding-top:45px;
}
li {
display: inline;
}
a {
font-family: Bree Serif;
font-size:20px
}
a:link {
color:#002D62;
background-color:white;
}
a:visited {
color:#002D62;
text-decoration:none;
background-color:white;
}
a:hover {
text-decoration:none;
color: #007D68; /* Green */
}
a:active{
text-decoration:none;
color: #F68E56; /* orange */
}
.NavLink {
margin-left:20px;
text-decoration:none;
}
.NavHome {
margin-left:30px;
text-decoration:none;
}
.NavContact {
margin-left:20px;
text-decoration:none;
}
#Current {
color: #F68E56; /* orange */
}
.ActivePage {
float:left;
padding-top:25px;
padding-left:50px;
width:auto;
}
.LoginTxt {
font-family: Bree Serif;
font-size:20px;
color:#FF5A40;
padding-left:25px;
float:left;
}
.LoginContainer {
border-style:solid;
border-width:1.5px;
border-radius:5px;
border-color:#F68E56;
width:120px;
height:40px;
float:right;
margin-right:300px;
margin-top:40px;
}
.DownTriangle {
padding-left:90px;
padding-top:15px;
float:left;
position:relative;
}
.LoginTxtContainer {
margin-top:10px;
}

There are a couple of issues need to be fixed first.
1 <img> is a self-closing tag, remove </img> from <img src="Images/Triangle.PNG"> </img>, or use <img src="" />
2 It's missing a closing > here <span class="glyphicon glyphicon-triangle-bottom" </span>
3 Remove the ) from <a href="Evosite.html" class="NavHome" id="Current")>
The best way to get the login button in the right place is to adjust the structure slightly, to move it next to the navigation bar. And don't use <h1> for it, as it's not a headline.
I rewrote most of the CSS, removed all the unnecessary styles, see the details and demo below.
CodePen Demo
/* For Demo Only */
#import url("https://fonts.googleapis.com/css?family=Bree+Serif");
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
/* CSS Document */
body {
font-family: "Bree Serif";
}
.wrapper {
width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* NavBar formatting */
.NavBar {
overflow: auto;
font-size: 20px;
}
.VictoriaHouse,
.MainNavigation {
float: left;
}
.MainNavigation {
padding-top: 30px;
}
.MainNavigation ul {
margin: 0;
padding: 0 0 0 20px;
}
.MainNavigation li {
display: inline-block;
vertical-align: top;
}
.MainNavigation a {
margin: 0 10px;
text-decoration: none;
color: #000;
display: block;
position: relative;
}
.MainNavigation #Current:after,
.MainNavigation a:hover:after {
content: url("http://i.imgur.com/zN4WiYV.png");
color: #F68E56;
width: 100%;
text-align: center;
position: absolute;
top: -20px;
left: 0;
}
.MainNavigation a:hover {
color: #007D68;
}
.LoginContainer {
float: right;
margin-top: 25px;
border: 1px solid #F68E56;
border-radius: 5px;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
}
.LoginContainer .LoginTxt {
text-decoration: none;
color: #FF5A40;
}
.LoginTxt .glyphicon {
font-size: 14px;
color: #000;
}
.LoginTxt:hover .glyphicon {
color: #FF5A40;
}
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="http://i.imgur.com/eB6yyLi.jpg" alt="Victoria House & Viney Court" />
</div>
<div class="MainNavigation">
<ul>
<li> Home </li>
<li> News </li>
<li> Tenants </li>
<li> Heritage </li>
<li> About Us </li>
<li> Book the Meeting Room </li>
<li> Contact Us </li>
</ul>
</div>
<div class="LoginContainer">
<a class="LoginTxt" href="#"> Log in <span class="glyphicon glyphicon-triangle-bottom"></span> </a>
</div>
</div>
<!-- Ends NavBar <-->
</div>
<!-- Ends wrapper -->

You had a couple of problems in your HTML/CSS. I managed to simplify and fix them, check this fiddle
Also, here's the code snippets...
CSS
/* CSS Document */
.wrapper {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.VictoriaHouse {
padding-left:270px;
padding-top:20px;
padding-bottom:20px;
padding-right:140px;
float:left;
}
/* NavBar formatting */
.NavBar {
float:inline-block;
text-decoration:none;
}
ul {
display:inline-block;
padding-top:45px;
}
li {
display: inline;
}
a {
font-family: Bree Serif;
font-size:20px
}
a:link {
color:#002D62;
background-color:white;
}
a:visited {
color:#002D62;
text-decoration:none;
background-color:white;
}
a:hover {
text-decoration:none;
color: #007D68; /* Green */
}
a:active{
text-decoration:none;
color: #F68E56; /* orange */
}
.NavLink {
margin-left:20px;
text-decoration:none;
}
.NavHome {
margin-left:30px;
text-decoration:none;
}
.NavContact {
margin-left:20px;
text-decoration:none;
}
#Current {
color: #F68E56; /* orange */
}
.ActivePage {
float:left;
padding-top:25px;
padding-left:50px;
width:auto;
}
.LoginContainer {
border-style:solid;
border-width:1.5px;
border-radius:5px;
border-color:#F68E56;
float:right;
margin-right:300px;
margin-top:40px;
line-height: 40px;
padding-left: 20px;
}
.LoginTxt {
font-family: Bree Serif;
font-size:20px;
color:#FF5A40;
display: inline-block;
margin:0;
}
.LoginContainer .downArrow {
padding-left: 10px;
padding-right: 5px;
}
HTML
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court"/>
</div>
<div class="ActivePage">
<img src="Images/Triangle.PNG"/>
</div>
<div class= "LoginContainer">
<h1 class="LoginTxt">Log in</h1>
<span class="downArrow glyphicon glyphicon-triangle-bottom"></span>
</div>
<ul>
<li> <a href="Evosite.html" class="NavHome" id="Current")> Home </a> </li>
<li> News </li>
<li> Tenants </li>
<li> Heritage </li>
<li> About Us </li>
<li> Book the Meeting Room </li>
<li> Contact Us </li>
</ul>
</div> <!-- Ends NavBar <-->
</div> <!-- Ends wrapper -->

Horizontal nav menu with submenus

I have this nav menu:
http://jsfiddle.net/laziale/T45tD/4/
I want to know how I can fix the menu that the nav menu will be expandable with submenus. I entered some sample data.
Here is the source code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="App_Themes/Main/style.css" />
<link type="text/css" rel="stylesheet" href="App_Themes/Main/reset.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="pagetop">
<div class="head pagesize">
<div class="head_top">
<div class="topbuts">
<ul class="clear">
</ul>
</div>
<div class="user clear">
<span class="user-detail">
</span>
</div>
<div class="logo clear">
<a href="#" title="Home">
<img src="Images/logo.jpg" class="picture" />
<span class="textlogo">
</span>
</a>
</div>
</div>
<div class="menu">
<ul class="clear">
<li class="active">Client
<ul>
<li class="subNav">Client Summary</li>
</ul>
</li>
<li>Agent
<ul>
<li class="subNav">Agent Summary
<ul>
<li class="subNav">Link1y</li>
<li class="subNav">Link2</li>
</ul></li>
</ul>
</li>
<li>System Utility
<ul>
<li class="subNav">Link1
<li class="subNav">Link2
<li class="subNav">Link3
</ul>
</li>
<li>Report</li>
<li>Maintenance</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div>
</div>
</form>
</body>
</html>
and the css:
body {
min-width:1000px;
text-align:center;
margin:0px;
font-family:Arial;
font-size:12px;
color:#666666;
background:#8D8D8D;
}
.pagetop {
width:100%;
min-width:1000px;
background-color: #333333;
border-bottom: 4px solid #007FAA;
position:relative;
z-index:100;
min-height:149px;
}
.head_top {
position:relative;
min-height:114px;
}
.topbuts {
position:absolute;
top:0px;
right:0px;
}
.topbuts ul {
float:right;
}
.topbuts li {
float:left;
margin-left:2px;
font-size:11px;
font-weight: bold;
}
.topbuts li a {
background:#007FAA;
text-decoration:none;
display:block;
color:#FFFFFF;
line-height:16px;
padding:1px 12px 2px 12px;
}
ol ul {
list-style:none;
}
.head {
padding:0px;
}
.pagesize {
width:1000px;
margin: 0px auto;
text-align:left;
}
.user {
clear:both;
float:right;
padding-top:27px;
}
.user-detail {
display: block;
float:right;
text-align:right;
}
.user-detail .name {
display: block;
line-height:normal;
text-align:left;
float:right;
font-size:18px;color:#FFFFFF;
padding:2px 0px 7px 0px;
}
.user-detail .text {
color: #bbbbbb;
clear:both;
font-size:11px;
line-height:18px;
color:#FFFFFF;
display:block;
}
.logo {
padding-top:20px;
}
.logo a {
text-decoration:none;
}
.logo .picture {
float:left;
margin-right:10px;
}
.logo .textlogo {
float:left;
}
.logo .title {
display:block;
font-family:Arial;
font-size:20px;
color:#FFFFFF;
font-weight: bold;
margin-top:5px;
letter-spacing: -0.02em;
}
.logo .text {
display:block;
font-weight: bold;
color: #BBBBBB;
position:relative;
top: -2px;
}
.menu ul {
font-size:13px;
}
.menu li {
float:left;
margin-right:3px;
padding-bottom:5px;
position:relative;
}
.menu li .active a {
background: #FFFFFF;
color: #333333;
text-shadow: 1px 1px 1px #BBBBBB;
}
.menu li a {
display:block;
line-height:16px;
padding: 7px 15px 7px 5px;
color: #FFFFFF;
text-decoration:none;
font-weight:bold;
text-shadow: 1px 1px 1px #333333;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background:url('..images/button_glas1.png') center center repeat-x #555555;
}
a {
color: #006577;
text-decoration:none;
}

You can use the superfish jQuery plugin.
Here is a demo

Either you can use javascript and hide all unwanted elements until you hover the right menu element, either you do it with CSS using something like this:
#navmenu .submenu{
display:none; /* dosen't show sub menus */
overflow:visible; /* shows overflow */
}
#navmenu li:hover > .submenu{ /* when you hover an li element change children following settings */
display:block; /* display elements */
}
HTML code example that works:
<div id="navmenu">
<ul>
<li>Réalisations
<ul class="submenu">
<li>Web</li>
<li>T-shirt</li>
<li>Autres prestations</li>
</ul>
</li>
<li> Galeries
<ul class="submenu gallery">
<li>Boston</li>
<li>Brig</li>
<li>Fleurs</li>
<li>Grèce</li>
<li>Nocturne</li>
<li>Noir&blanc</li>
<li>Paris</li>
<li>Portrait</li>
<li>Perspective</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
There are many tutorials on the web for more examples ;)