css footer issue in html5 - css

Question

Here is code for footer section:
<footer>
<div class="footer">
<nav>
<ul class="nav-list1">
<li><img src="img/notes.png" alt="img"></li>
<li>ARTICLES</li>
<li>BLOG</li>
<li>COLUMN</li>
<li>TOPICS</li>
</ul>
<ul class="nav-list2">
<li>ABOUT</li>
<li>AUTHOURS</li>
<li>MASTHEAD</li>
<li>CONTRIBUTE</li>
<li>STYLEGUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style" />
<section class="clearfix footerWidth">
<div class="footer-column1">
<img src="img/footer1.png" class="footer-image" alt="dot"/>
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<p><a class="footer-link" href="#">ask here. ></a></p>
</div>
<div class="footer-column2">
<img src="img/footer2.png" class="footer-image" alt="expert"/>
<p class="footer-title">Shopify Expert at $20 / hour</p>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<p><a class="footer-link" href="#">click to view</a></p>
</div>
</section>
<hr class="hr-style" />
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
Here is my JSfiddle:
http://jsfiddle.net/d0teo50p/7/
In my page in footer section, right side of content didn't show properly.
Can anybody help me to fix this.

Answer 1

Set width:960px; to div.footer and style="float:left;" to div.footer-column2 > p.footer-title and remove width:110%; to p.footer-pgf.
TRY - DEMO
HTML
<div class="wrapper">
<header id="header">
<img src="http://s30.postimg.org/rlkl06s9d/logo.jpg" alt="logo" id="logo">
<h1>The Articles</h1>
<nav class="header-nav">
<ul>
<li>Articles</li>
<li><img src="img/icon.png" alt=""> Home</li>
</ul>
</nav>
</header>
<section id="section">
<article class="article">
<img src="http://s30.postimg.org/60fickvip/articles.jpg" alt="articles" />
<p class="comments">
by<span class="woo"> JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date>
</p>
<h1 class="issue">Issue No 376</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
<div class="border-bottom"></div>
<div class="article1">
<img src="http://s30.postimg.org/anq5s389d/cat.png" alt="" />
<p class="comments">
by <span class="woo">JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date>
</p>
<h1 class="issue">Issue No 375</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
</div>
</article>
<aside class="aside">
<img src="http://s30.postimg.org/hlpokah01/agencies.jpg" alt="agencies" />
<h3>From the Blog</h3>
<p class="windows">DAVID <i> on </i>c# Windows</p>
<p class="hex">How to convert System.Color to HTML color (hex)?</p>
<p class="sidebar-pgf">I'm working on an application that requires converting the back color of the panel to HTML that can be used as a div background color. Please help.</p>
view answer
</aside>
</section>
</div>
<footer>
<div class="footer">
<nav>
<ul class="nav-list1">
<li><img src=".http://s30.postimg.org/rhqrjxmrx/notes.png" alt="img"></li>
<li>ARTICLES</li>
<li>BLOG</li>
<li>COLUMN</li>
<li>TOPICS</li>
</ul>
<ul class="nav-list2">
<li>ABOUT</li>
<li>AUTHOURS</li>
<li>MASTHEAD</li>
<li>CONTRIBUTE</li>
<li>STYLEGUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style" />
<section class="clearfix footerWidth">
<div class="footer-column1">
<img src="http://s30.postimg.org/ckiaix9jl/footer1.png" class="footer-image" alt="dot"/>
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<p><a class="footer-link" href="#">ask here.</a></p>
</div>
<div class="footer-column2">
<img src="http://s30.postimg.org/fm92svmoh/footer2.png" class="footer-image" alt="expert"/>
<p class="footer-title" style="float:left;">Shopify Expert at $20 / hour</p>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<p><a class="footer-link" href="#">click to view</a></p>
</div>
</section>
<hr class="hr-style" />
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
CSS
* {
box-sizing:border-box;
}
body {
font-family:Raleway, sans-serif;
text-decoration:none;
line-height:1.42857143;
margin:0;
}
html {
position:relative;
min-height:100%;
}
.wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
}
#header {
margin:10px;
}
#header nav {
float:right;
margin-top:15px;
}
#header nav li {
display:inline-block;
}
#logo {
padding-bottom:40px;
border-bottom:solid 2px #CCC;
}
.view {
color:#FF8C00;
}
.hr-style {
background:url(http://s27.postimg.org/4sfiqgx7j/horizontal_lin
e.png) 50% 0 repeat-x;
border:0;
height:15px;
}
a {
text-decoration:none;
font-size:12px;
}
i {
font-weight:100;
}
img {
vertical-align:middle;
border:0;
}
.header-nav ul li {
display:inline;
float:right;
font-size:12px;
padding:10px;
}
.header-nav ul li a {
color:gray;
}
.comments,date {
color:gray;
font-size:12px;
font-style:italic;
}
.woo {
color:#FF8C00;
font-style:normal;
font-size:15px;
}
.lorem {
color:gray;
font-size:13px;
line-height:25px;
letter-spacing:.07pt;
width:86%;
}
.border-bottom {
border-bottom:1px solid gray;
width:90%;
padding-top:15px;
}
.dev-express {
font-size:12px;
font-family:Arial Narrow;
color:gray;
letter-spacing:1pt;
}
.article1 {
margin-top:15px;
}
.myButton {
background-color:#FF8C00;
border-radius:4px;
display:inline-block;
cursor:pointer;
color:#fff;
font-size:13px;
text-decoration:none;
padding:6px 18px;
}
.myButton:hover {
background-color:#FF8C00;
}
.myButton:active {
position:relative;
top:1px;
}
#section {
display:table;
}
.article {
width:75%;
padding-bottom:50px;
display:table-cell;
vertical-align:top;
}
.aside {
display:table-cell;
vertical-align:top;
width:25%;
}
.issue {
color:#FF8C00;
font-size:25px;
font-weight:400;
}
.windows {
font-weight:600;
font-size:12px;
}
.hex {
font-weight:600;
color:#FF8C00;
}
.sidebar-pgf {
font-size:13px;
line-height:23px;
letter-spacing:.07pt;
}
nav {
text-align:center;
}
.nav-list1 li {
display:inline;
font-size:12px;
font-weight:700;
letter-spacing:.2pt;
padding:15px;
}
.nav-list2 li {
display:inline;
font-size:11px;
font-weight:800;
letter-spacing:.2pt;
padding:15px;
}
.footer {
background-image:url(http://s27.postimg.org/80k03ijhb/footer_bg.jpg);
bottom:0;
clear:both;
height:auto;
padding:15px;
width:960px;
}
.footer-image {
float:left;
padding-right:13px;
}
.footer-title {
font-weight:700;
font-size:12px;
}
.footer-pgf {
font-size:11px;
}
.footer-link {
font-size:11px;
font-weight:600;
}
.copyright {
font-size:12px;
font-weight:500;
text-align:center;
}
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.column4-pgf {
font-size:11px;
}
.well {
background-color:#f5f5f5;
border:#e3e3e3 solid 1px;
border-radius:4px;
box-shadow:0 1px 1px rgba(0,0,0,0.05) inset;
margin-bottom:20px;
min-height:20px;
padding:19px;
}
.footer-column2 {
margin-left:45px!important;
}
section.footerWidth {
width:960px;
margin:0 auto;
}
#header h1,.footer-column1,.footer-column2 {
float:left;
}
#media min-width992px{
.column-1,.column-2,.column-3,.column-4,.footer-column1,.footer-column2 {
min-height:1px;
padding-left:15px;
padding-right:15px;
position:relative;
}
}
#media min-width 992px{
.footer-column1,.footer-column2 {
width:45%;
margin-left:15px;
}
}
Image: