Expand div to fill page width - html

Question

I'm writing a bookmarking program, and for the past few days, this bug has caught my eye: The "I'm Niva, a: " bar doesn't extend to fill up the whole page's width. I've already attempted checking the console, and adding 0 margins+paddings, but nothing seems to work. If anyone could provide a solution, that would be great!
#wide{
color:white;
font-size: 60px;
font-family: 'Quicksand', sans-serif;
flex: 0.1;
background-color:rgba(51,153,255,0.5);
}
Program:
https://codepen.io/Refath/pen/RjwOQN
#import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body {
/**background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg")**/
align-content: no-repeat center center fixed;
background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fChange:hover,
.yChange:hover,
.gChange:hover,
.aChange:hover {
background-color: rgba(3, 3, 3, 0.21);
transition: all ease 0.2s;
}
.circle,
.r1c,
.r2c,
.r3c,
.r4c {
width: 90px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: fixed;
margin: auto;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: -5px -5px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1c,
.r2c,
.r3c,
.r4c,
.circle {
animation: around infinite;
animation-duration: 30s;
animation-direction: reverse;
}
.r1c.off,
.r2c.off,
.r3c.off,
.r4c.off {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.circle {
background-image: url(https://qph.ec.quoracdn.net/main-qimg-a1bd7842675b4c551751a7bb50da3667);
background-position: -5px -6px;
opacity: 0.9;
}
.r1c:hover,
.r2c:hover,
.r3c:hover,
.r4c:hover {
width: 108px;
height: 108px;
border-radius: 108px;
transition: 0.07s ease-in;
background-size: 120px 120px;
background-position: -5.4px -5.4px;
}
.r1c {
overflow: hidden;
top: 400px;
background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}
.r2c {
top: -400px;
background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}
.r3c {
left: 400px;
background-image: url(https://cdn.worldvectorlogo.com/logos/facebook-3.svg);
}
.r4c {
right: 400px;
background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}
.r1l,
.r2l,
.r3l,
.r4l {
border: white 1px solid;
width: 0px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1l {
top: 200px;
}
.r2l {
top: -200px;
}
.r3l {
width: 90px;
height: 0px;
left: 200px;
}
.r4l {
width: 90px;
height: 0px;
left: -200px;
}
.parent.off {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.parent {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
animation: around infinite;
}
.parent.custom {
animation-duration: 30s;
}
#keyframes around {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#wide {
color: white;
font-size: 60px;
font-family: 'Quicksand', sans-serif;
flex: 0.1;
background-color: rgba(51, 153, 255, 0.5);
}
#narrow {
color: lightblue;
font-size: 60px;
flex: 0.9;
font-family: 'Quicksand', sans-serif;
background-color: rgba(51, 153, 255, 0.7);
}
.name {
position: relative;
font-size: 60px;
text-align: center;
font-family: 'Quicksand', sans-serif;
}
.rotate-text {
color: white;
font-size: 60px;
flex: 0.5;
font-family: 'Quicksand', sans-serif;
background: lightblue;
background-color: rgba(51, 153, 255, 0.8);
}
#parent {
display: flex;
background-color: red;
}
.juan {
font: 40px/50px Arial;
text-align: center;
}
.jesus {
text-align: center;
font-size: 20px;
}
.rotate-text {
display: inline-block;
background-color: lightgreen;
}
.rotating {
float: right;
overflow: hidden;
position: relative;
height: 100px;
}
.inside {
display: inline-block;
color: lightblue;
position: relative;
white-space: nowrap;
top: -20px;
left: 0px;
animation: move 5s;
animation-iteration-count: infinite;
animation-delay: 1s;
padding: 20px;
}
#keyframes move {
0% {
top: -20px;
}
20% {
top: -100px;
}
40% {
top: -200px;
}
60% {
top: -300px;
}
}
.name {
color: white;
}
.options {
width: 400px;
height: 450px;
color: white;
padding: 15px 10px 0px 5px;
float: left;
position: relative;
top: -340px;
left: 20px;
}
.gtext,
.atext,
.ytext,
.ftext {
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
width: 20px;
height: 25px;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
}
li {
padding: 7px;
}
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
button {
fill: red;
}
.setText {
text-align: center;
font-size: 20px;
}
button {
color: red;
}
/**Derived from: **/
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 160px;
height: 236px;
text-align: center;
vertical-align: middle;
font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 300px;
overflow: visible;
overflow-y: scroll;
padding-left: 20px;
transition: 0.9s ease-out all;
}
.main-menu {
padding-left: 20px;
background: #fbfbfb;
position: absolute;
top: 100px;
background-color: rgba(51, 153, 255, 0.5);
bottom: 0px;
height: 90%;
left: 0;
width: 20px;
overflow: visible;
overflow-y: scroll;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
z-index: 1000;
padding-top: 20px;
transition: 0.9s ease-out all;
padding-bottom: 50px;
}
.featureName {
transform: rotate(-90deg);
position: relative;
top: 50%;
right: 10px;
}
.main-menu:hover>.featureName {
visibility: hidden;
}
.main-menu>ul {
margin: 2px 0;
}
.main-menu li {
position: relative;
display: block;
width: 250px;
}
/**your element has a height of auto, overflow hidden, and content within it that are position float. giving that outer element a set height, and then a child element that grows to fit the content, would allow the parent element to scroll the child
**/
.main-menu li>a {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
color: #999;
font-family: arial;
font-size: 14px;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-menu .nav-icon {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 18px;
}
.main-menu .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 20px;
}
.main-menu>ul.logout {
position: absolute;
left: 0;
bottom: 0;
}
.no-touch .scrollable.hover {
overflow-y: visible;
overflow-y: scroll;
}
.no-touch .scrollable.hover:hover {
overflow-y: auto;
overflow: visible;
overflow-y: scroll;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
color: #fff;
background-color: #5fa2db;
}
.blurredBg {
height: 100%;
width: 100%;
text-align: center;
background-size: cover;
position: absolute;
left: 0;
top: 0;
background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#ImageUrl {}
#charset "utf-8";
#import url(http://weloveiconfonts.com/api/?family=entypo);
a[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
left: 70%;
position: absolute;
top: 50%;
transition: 0.3s all ease;
}
/* ---------- SOCIAL ---------- */
.social {
position: relative;
height: 3em;
width: 13.5em;
}
.social li {
display: block;
height: 4em;
line-height: 4em;
margin: -2.2em;
position: absolute;
-webkit-transition: -webkit-transform .7s;
-moz-transition: -moz-transform .7s;
-ms-transition: -ms-transform .7s;
-o-transition: -o-transform .7s;
transition: transform .7s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
text-align: center;
width: 4em;
}
.social a {
color: #fffdf0;
display: block;
height: 4em;
line-height: 4em;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 4em;
transition: 0.3s all ease;
}
.social li:hover {
-webkit-transform: scale(1.3, 1.3) rotate(45deg);
-moz-transform: scale(1.3, 1.3) rotate(45deg);
-ms-transform: scale(1.3, 1.3) rotate(45deg);
-o-transform: scale(1.3, 1.3) rotate(45deg);
transform: scale(1.3, 1.3) rotate(45deg);
transition: 0.3s all ease;
}
.facebook {
background: #155b9d;
left: 0;
top: 0%;
}
.container img {
width: 50px;
position: relative;
top: -20%;
}
.twitter {
background: #1a9ec4;
bottom: 0;
left: 25%;
}
.dribbble {
background-color: lightblue;
left: 50%;
top: 0%;
width: 5em;
height: 5em;
}
.dribbble img {
top: 0%;
}
.social .dribbble {
width: 5em;
height: 5em;
left: 46%;
top: -50%;
}
.behance {
background: #3f7aa3;
bottom: 0;
left: 75%;
}
.linked-in {
background: #157f9d;
left: 100%;
top: 0%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-flat-attack.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-os.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="blurredBg">
</div>
<div id="parent">
<div class="animated slideInLeft" id="wide">
<center>Hi.</center>
</div>
<div class="tooltipped animated lightSpeedIn" data-position="bottom" data-delay="50" data-tooltip="Hey there! Just hover over that Settings on the left :) Trust me on this one. " id="narrow">
<center>I'm <img src="https://qph.ec.quoracdn.net/main-qimg-00f778bc5f5fcb5d79a0372986ab1e66.webp" width=70>iva, a:
<b class="rotating"> <span class = "inside">
One-Stop Shop<br>
Music Player<br>
Task Manager<br>
Hover Me!
</span></b>
</center>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="parent">
<div id="weather"></div>
<div class="circle">
</div>
<a href="https://www.google.com" class="glink">
<div class="r1c">
</div>
</a>
<a href="https://www.youtube.com" class="ylink">
<div class="r2c">
</div>
</a>
<a href="https://www.facebook.com" class="flink">
<div class="r3c">
</div>
</a>
<a href="https://www.amazon.com" class="alink">
<div class="r4c">
</div>
</a>
<div class="r1l">
</div>
<div class="r2l">
</div>
<div class="r3l">
</div>
<div class="r4l">
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 class="name">
~ Refath</h2>
<div class="area"></div>
<nav class="main-menu">
<div class="featureName">Settings</div>
<div class="jesus">
<h3>Settings</h3>
<hl>
<ul>
<li class="gChange">Google</li>
<button class="gClick waves-effect waves-light green darken-2 btn">Change</button>
<button onClick="store()" class="gSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="gtext" id="gtext" placeholder="Paste New URL" onkeydown="if (event.keyCode == 13)
document.getElementById('gSave').click()">
<li class="aChange">Amazon</li><button class="aClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="aSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="atext" placeholder="Paste New URL">
<li class="yChange">Youtube</li><button class="yClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="ySave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ytext" placeholder="Paste New URL">
<li class="fChange">Facebook</li><button class="fClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="fSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ftext" placeholder="Paste New URL">
<li class="speedChange">Speed</li><button class="speedClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="speedSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="speedtext" placeholder="Change wheel speed">
<li class="bgChange">Background Image</li>
<input id="ImageUrl" placeholder="Background Image URL" /> <button class="waves-effect waves-light blue darken-2 btn" id="Btn">Go</span>
<br> <br>
<button class = "simple waves-effect waves-light green darken-2 btn">Simplify</button>
</ul>
</div>
</nav>
<div class="container">
<ul class="social">
<li class="dribbble">
<img src="http://cdn.appstorm.net/web.appstorm.net/files/2010/12/Chrome-Store1.png">
</li>
</ul>
</div>
<form>
<label>Enter a new task:</label>
<input class="input" type="text">
<input type="submit" value="Add">
</form>
<ul title="Click to delete; drag to reorder">
</ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="scripts.js"></script>

Answer 1

body {
height: 100%;
/* overflow: auto; */
}
#import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body {
/**background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg")**/
align-content: no-repeat center center fixed;
background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fChange:hover,
.yChange:hover,
.gChange:hover,
.aChange:hover {
background-color: rgba(3, 3, 3, 0.21);
transition: all ease 0.2s;
}
.circle,
.r1c,
.r2c,
.r3c,
.r4c {
width: 90px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: fixed;
margin: auto;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: -5px -5px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1c,
.r2c,
.r3c,
.r4c,
.circle {
animation: around infinite;
animation-duration: 30s;
animation-direction: reverse;
}
.r1c.off,
.r2c.off,
.r3c.off,
.r4c.off {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.circle {
background-image: url(https://qph.ec.quoracdn.net/main-qimg-a1bd7842675b4c551751a7bb50da3667);
background-position: -5px -6px;
opacity: 0.9;
}
.r1c:hover,
.r2c:hover,
.r3c:hover,
.r4c:hover {
width: 108px;
height: 108px;
border-radius: 108px;
transition: 0.07s ease-in;
background-size: 120px 120px;
background-position: -5.4px -5.4px;
}
.r1c {
overflow: hidden;
top: 400px;
background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}
.r2c {
top: -400px;
background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}
.r3c {
left: 400px;
background-image: url(https://cdn.worldvectorlogo.com/logos/facebook-3.svg);
}
.r4c {
right: 400px;
background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}
.r1l,
.r2l,
.r3l,
.r4l {
border: white 1px solid;
width: 0px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1l {
top: 200px;
}
.r2l {
top: -200px;
}
.r3l {
width: 90px;
height: 0px;
left: 200px;
}
.r4l {
width: 90px;
height: 0px;
left: -200px;
}
.parent.off {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.parent {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
animation: around infinite;
}
.parent.custom {
animation-duration: 30s;
}
#keyframes around {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#wide {
color: white;
font-size: 60px;
font-family: 'Quicksand', sans-serif;
flex: 0.1;
background-color: rgba(51, 153, 255, 0.5);
}
#narrow {
color: lightblue;
font-size: 60px;
flex: 0.9;
font-family: 'Quicksand', sans-serif;
background-color: rgba(51, 153, 255, 0.7);
}
.name {
position: relative;
font-size: 60px;
text-align: center;
font-family: 'Quicksand', sans-serif;
}
.rotate-text {
color: white;
font-size: 60px;
flex: 0.5;
font-family: 'Quicksand', sans-serif;
background: lightblue;
background-color: rgba(51, 153, 255, 0.8);
}
#parent {
display: flex;
background-color: red;
}
.juan {
font: 40px/50px Arial;
text-align: center;
}
.jesus {
text-align: center;
font-size: 20px;
}
.rotate-text {
display: inline-block;
background-color: lightgreen;
}
.rotating {
float: right;
overflow: hidden;
position: relative;
height: 100px;
}
.inside {
display: inline-block;
color: lightblue;
position: relative;
white-space: nowrap;
top: -20px;
left: 0px;
animation: move 5s;
animation-iteration-count: infinite;
animation-delay: 1s;
padding: 20px;
}
#keyframes move {
0% {
top: -20px;
}
20% {
top: -100px;
}
40% {
top: -200px;
}
60% {
top: -300px;
}
}
.name {
color: white;
}
.options {
width: 400px;
height: 450px;
color: white;
padding: 15px 10px 0px 5px;
float: left;
position: relative;
top: -340px;
left: 20px;
}
.gtext,
.atext,
.ytext,
.ftext {
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
width: 20px;
height: 25px;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
}
li {
padding: 7px;
}
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
/* overflow: auto; */
}
button {
fill: red;
}
.setText {
text-align: center;
font-size: 20px;
}
button {
color: red;
}
/**Derived from: **/
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 160px;
height: 236px;
text-align: center;
vertical-align: middle;
font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 300px;
overflow: visible;
overflow-y: scroll;
padding-left: 20px;
transition: 0.9s ease-out all;
}
.main-menu {
padding-left: 20px;
background: #fbfbfb;
position: absolute;
top: 100px;
background-color: rgba(51, 153, 255, 0.5);
bottom: 0px;
height: 90%;
left: 0;
width: 20px;
overflow: visible;
overflow-y: scroll;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
z-index: 1000;
padding-top: 20px;
transition: 0.9s ease-out all;
padding-bottom: 50px;
}
.featureName {
transform: rotate(-90deg);
position: relative;
top: 50%;
right: 10px;
}
.main-menu:hover>.featureName {
visibility: hidden;
}
.main-menu>ul {
margin: 2px 0;
}
.main-menu li {
position: relative;
display: block;
width: 250px;
}
/**your element has a height of auto, overflow hidden, and content within it that are position float. giving that outer element a set height, and then a child element that grows to fit the content, would allow the parent element to scroll the child
**/
.main-menu li>a {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
color: #999;
font-family: arial;
font-size: 14px;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-menu .nav-icon {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 18px;
}
.main-menu .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 20px;
}
.main-menu>ul.logout {
position: absolute;
left: 0;
bottom: 0;
}
.no-touch .scrollable.hover {
overflow-y: visible;
overflow-y: scroll;
}
.no-touch .scrollable.hover:hover {
overflow-y: auto;
overflow: visible;
overflow-y: scroll;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
color: #fff;
background-color: #5fa2db;
}
.blurredBg {
height: 100%;
width: 100%;
text-align: center;
background-size: cover;
position: absolute;
left: 0;
top: 0;
background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#ImageUrl {}
#charset "utf-8";
#import url(http://weloveiconfonts.com/api/?family=entypo);
a[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
left: 70%;
position: absolute;
top: 50%;
transition: 0.3s all ease;
}
/* ---------- SOCIAL ---------- */
.social {
position: relative;
height: 3em;
width: 13.5em;
}
.social li {
display: block;
height: 4em;
line-height: 4em;
margin: -2.2em;
position: absolute;
-webkit-transition: -webkit-transform .7s;
-moz-transition: -moz-transform .7s;
-ms-transition: -ms-transform .7s;
-o-transition: -o-transform .7s;
transition: transform .7s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
text-align: center;
width: 4em;
}
.social a {
color: #fffdf0;
display: block;
height: 4em;
line-height: 4em;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 4em;
transition: 0.3s all ease;
}
.social li:hover {
-webkit-transform: scale(1.3, 1.3) rotate(45deg);
-moz-transform: scale(1.3, 1.3) rotate(45deg);
-ms-transform: scale(1.3, 1.3) rotate(45deg);
-o-transform: scale(1.3, 1.3) rotate(45deg);
transform: scale(1.3, 1.3) rotate(45deg);
transition: 0.3s all ease;
}
.facebook {
background: #155b9d;
left: 0;
top: 0%;
}
.container img {
width: 50px;
position: relative;
top: -20%;
}
.twitter {
background: #1a9ec4;
bottom: 0;
left: 25%;
}
.dribbble {
background-color: lightblue;
left: 50%;
top: 0%;
width: 5em;
height: 5em;
}
.dribbble img {
top: 0%;
}
.social .dribbble {
width: 5em;
height: 5em;
left: 46%;
top: -50%;
}
.behance {
background: #3f7aa3;
bottom: 0;
left: 75%;
}
.linked-in {
background: #157f9d;
left: 100%;
top: 0%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-flat-attack.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-os.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="blurredBg">
</div>
<div id="parent">
<div class="animated slideInLeft" id="wide">
<center>Hi.</center>
</div>
<div class="tooltipped animated lightSpeedIn" data-position="bottom" data-delay="50" data-tooltip="Hey there! Just hover over that Settings on the left :) Trust me on this one. " id="narrow">
<center>I'm <img src="https://qph.ec.quoracdn.net/main-qimg-00f778bc5f5fcb5d79a0372986ab1e66.webp" width=70>iva, a:
<b class="rotating"> <span class = "inside">
One-Stop Shop<br>
Music Player<br>
Task Manager<br>
Hover Me!
</span></b>
</center>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="parent">
<div id="weather"></div>
<div class="circle">
</div>
<a href="https://www.google.com" class="glink">
<div class="r1c">
</div>
</a>
<a href="https://www.youtube.com" class="ylink">
<div class="r2c">
</div>
</a>
<a href="https://www.facebook.com" class="flink">
<div class="r3c">
</div>
</a>
<a href="https://www.amazon.com" class="alink">
<div class="r4c">
</div>
</a>
<div class="r1l">
</div>
<div class="r2l">
</div>
<div class="r3l">
</div>
<div class="r4l">
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 class="name">
~ Refath</h2>
<div class="area"></div>
<nav class="main-menu">
<div class="featureName">Settings</div>
<div class="jesus">
<h3>Settings</h3>
<hl>
<ul>
<li class="gChange">Google</li>
<button class="gClick waves-effect waves-light green darken-2 btn">Change</button>
<button onClick="store()" class="gSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="gtext" id="gtext" placeholder="Paste New URL" onkeydown="if (event.keyCode == 13)
document.getElementById('gSave').click()">
<li class="aChange">Amazon</li><button class="aClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="aSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="atext" placeholder="Paste New URL">
<li class="yChange">Youtube</li><button class="yClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="ySave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ytext" placeholder="Paste New URL">
<li class="fChange">Facebook</li><button class="fClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="fSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ftext" placeholder="Paste New URL">
<li class="speedChange">Speed</li><button class="speedClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="speedSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="speedtext" placeholder="Change wheel speed">
<li class="bgChange">Background Image</li>
<input id="ImageUrl" placeholder="Background Image URL" /> <button class="waves-effect waves-light blue darken-2 btn" id="Btn">Go</span>
<br> <br>
<button class = "simple waves-effect waves-light green darken-2 btn">Simplify</button>
</ul>
</div>
</nav>
<div class="container">
<ul class="social">
<li class="dribbble">
<img src="http://cdn.appstorm.net/web.appstorm.net/files/2010/12/Chrome-Store1.png">
</li>
</ul>
</div>
<form>
<label>Enter a new task:</label>
<input class="input" type="text">
<input type="submit" value="Add">
</form>
<ul title="Click to delete; drag to reorder">
</ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="scripts.js"></script>
Also you have a problem with
.main-menu {
height: 90%;
It should be
height: calc(100% - 100px);
But it would be better if you remove height (or set it to auto) and use only
bottom: 0;
So The block will fit regardless window size:

Answer 2

Problem solved! Turns out there was a padding code afterwards interfering with my commands!