How to get Responsive Bootstrap Contact Form - html

I'm very happy with my bootstrap contact form, however when I minimize it down to cellular level it disappears and I have to scroll all the way to the right. Can anyone help me with my CSS to size it down perfectly?
Also, is there any way to make the toggle buttons center when they visible rather than floating to the left.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse"data-target="#navbarResponsive"aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" title="Email">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>Contact</h1>
<h4>If you would like to work with me, send me a message!</h4>
</div>
<!--Contact-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="fname" name="name" placeholder="Name" type="text" class="form-control">
<label for="fname" class="fa fa-user input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="email" name="email" type="text" placeholder="Email" class="form-control">
<label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
<label for="message" class="fa fa-pencil input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
html{
box-sizing: border-box;}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body{background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family:"Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
navbar-brand{
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro{
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1{
font-weight: medium;
text-shadow:5px 5px 10px black;
}
h4{
font-size: -.5em;
}
.row{
margin-right: 4em;
margin-left: 4em;
margin-top: .10em;
padding-bottom: -.30em;
}
.container {
margin-left: 17em;
padding-top: 1.5em;
}
.bigicon {
font-size: 35px;
color: #808080;
}
.input-icon {
position: absolute;
left: .5rem;
top: .7rem;
/* Keep icon in center of input, regardless of the input height */
}
#message {
vertical-align: middle;
}
input {
padding-right:30px;
}
.form-control {
text-indent: 2rem;
width: 75%;
}
.input-wrapper {
position: relative;
}
.btn{
margin-right: 10em;
}
#media screen and (min-width: 640px){
}
#media screen and (min-width: 960px){
}
main {flex: 1;}


Perhaps instead of using separate li tags you can use the bootstrap row and column parameters. Try something like this:
<!--Social Media Icons-->
<li class="nav-item">
<div class="row">
<div class="col-xs-2">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" title="Email"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</div>
</div>
</li>


I found the answers:
For the contact form to be responsive I deleted the .row in CSS. Once I did that, it was working as a responsive form.
For the toggle buttons to be center, I simply added "text-center" to the collapse property. See below.
<div class="collapse navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>

Related

why my code is not covering the whole screen in mobile view its is only covering half of the screen

please help me out with this code. It looks great in the pc but covering only half of the screen in the mobile view. Do guide me out with this issue. Below is my code of HTML and CSS. I will be very grateful for your help. I think there is some problem with the container-fluid class which is, as it is not covering the whole screen
body{
/* background: no-repeat fixed url(../images/background.png); */
font-family: 'open Sans';
color: white;
}
/* Navbar section */
.container-fluid{
background: no-repeat fixed url(../images/background3.png);
background-size: cover;
padding: 8% 15%;
height: 710px;
}
.navbar-light{
background-color: #78c9cb;
color: grey;
font-size: 200%;
}
/* Create Account Section */
.card{
max-width: 800px;
padding: 0;
text-align: center;
/* margin-top: 10%; */
}
.create{
font-size: 3rem;
padding:0;
font-weight: bolder;
}
.form-group{
padding: 0.8rem;
}
#media (max-width:800px) {
.container-fluid{
padding: 20% 15%;
}
body{
max-height: 100%;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- CSS stylesheet -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700">
<link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<title></title>
</head>
<body>
<!-- Navigation bar -->
<header id="Head">
<div class="container-fluid">
<nav class="navbar fixed-top navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src="images/icon.png" width="30%" height="30%" alt="Icon">
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#menu"
aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#news">News</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#profile">Profile</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Registration -->
<div class="row ">
<div class="card bg-dark mx-auto">
<div class="card-header">
<h2 class="create">Create Account</h2>
</div>
<div class="card-body">
<form class="" action="login.php" method="post">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-user"></i> </span>
</div>
<input name="username" class="form-control" placeholder="User name" type="text">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
</div>
<input name="email" class="form-control" placeholder="Email address" type="email">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input name="password" class="form-control" placeholder="Password" type="password">
</div>
<input type="submit" class="btn btn-primary btn-block" name="submit" value="Create
Account">
<p>Have an account?Log In </p>
</form>
</div>
</div>
</div>
</div>
</header>
</section>
<!-- JavascriptTags -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>

Add this style #375px media queries for iPhone
#media only screen and (max-width:375px) {
#Head .container-fluid{
padding: 0;
}
}
Working demo
body{
/* background: no-repeat fixed url(../images/background.png); */
font-family: 'open Sans';
color: white;
}
/* Navbar section */
.container-fluid{
background: no-repeat fixed url(../images/background3.png);
background-size: cover;
padding: 8% 15%;
height: 710px;
}
.navbar-light{
background-color: #78c9cb;
color: grey;
font-size: 200%;
}
/* Create Account Section */
.card{
max-width: 800px;
padding: 0;
text-align: center;
/* margin-top: 10%; */
}
.create{
font-size: 3rem;
padding:0;
font-weight: bolder;
}
.form-group{
padding: 0.8rem;
}
#media (max-width:800px) {
.container-fluid{
padding: 20% 15%;
}
body{
max-height: 100%;
}
}
#media only screen and (max-width:375px) {
#Head .container-fluid{
padding: 0;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- CSS stylesheet -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700">
<link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<title></title>
</head>
<body>
<!-- Navigation bar -->
<header id="Head">
<div class="container-fluid">
<nav class="navbar fixed-top navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src="images/icon.png" width="30%" height="30%" alt="Icon">
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#menu"
aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#news">News</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#profile">Profile</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Registration -->
<div class="row ">
<div class="card bg-dark mx-auto">
<div class="card-header">
<h2 class="create">Create Account</h2>
</div>
<div class="card-body">
<form class="" action="login.php" method="post">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-user"></i> </span>
</div>
<input name="username" class="form-control" placeholder="User name" type="text">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
</div>
<input name="email" class="form-control" placeholder="Email address" type="email">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input name="password" class="form-control" placeholder="Password" type="password">
</div>
<input type="submit" class="btn btn-primary btn-block" name="submit" value="Create
Account">
<p>Have an account?Log In </p>
</form>
</div>
</div>
</div>
</div>
</header>
</section>
<!-- JavascriptTags -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>

Social Media Icons Responsive

I can't seem to make my social media icons be responsive when in cellular mode. it stays to the very corner of the right. I would like it to be centered /horizontally right under the bio section. I'm finding it a bit difficult because I'm not using bootstrap for this feature, just basic ul list. If anyone can help, i would appreciate it.
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="about1.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="index.php" title="Email">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>About</h1>
</div>
<main>
<div class="row">
<div class="col"><p> <h5> Eddie Munoz is an Austin, Texas based character artist currently working with QC Games, a video game development company. He previously worked at Carbine Studios in Aliso Viejo, California helping create various creatures, armors, mounts, and weapons for WildStar; a free-to-play online game. Be sure to follow him on instagram for his latest projects. <h5><br></div>
<!-- <img src="images/hammer.gif" alt="" width="200" height="275"><-->
</div>
</main>
<footer class="page-footer">
<ul>
<li>
<i class="fa fa-instagram fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-linkedin-square fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-twitter fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-deviantart fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-paint-brush fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<a href="index.php" title="Email">
<i class="fa fa-envelope-o fa-lg" aria-hidden="true" style="color:white"></i></a>
</ul>
</li>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
html{
box-sizing: border-box;}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body{
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family:"Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
-webkit-font-smoothing: antialiased;
}
navbar-brand{
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro{
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1{
font-weight: medium;
text-shadow:5px 5px 10px black;
position: center;
}
h5{
color: #FFF;
margin: 10px 75px 10px;
padding-left: 2px;
padding-right: 2px;
font-size: .9em;
}
.row{
display: flex;
flex-flow: column wrap;
margin-left: .6em;
margin-right: .6em;
}
.col{
flex: 1;
margin: .5em;
padding: 15px 75px 15px;
color: #FFF;
font-size: .9em;
}
.page-footer{
display:flex;
margin: 10px 475px 10px;
list-style-type: none;
}
.page-footer ul{
align-items:center;
}
.page-footer ul li{
display:inline-block;
margin-right: 20px;
margin-left: 20px;
}
#media screen and (min-width: 640px){
.row{flex-flow: row wrap;}
main .col:nth-child(2){flex: 1;}
}
#media screen and (min-width: 960px){
main .col:nth-child(2){flex: .40;}
}
main {flex: 1;}

try this (i gave the ul a class to avoid affecting other uls in the page) :
ul.social-icons {
display: block;
margin: 0 auto;
text-align: center
}
ul.social-icons li {
display: inline-block;
}

Bootstrap Navbar Brand left, about/gallery right

I'm satisfied where my brand is, however I would like my About, Gallery and icons shifted more to the right. As you can see, there is a big gap at the end of the "envelope" icon, I would like it even, just as my brand/avatar is.
I have tried doing ml-auto, mr-auto in the bootstrap code, but nothing has worked.
html {
box-sizing: border-box;
}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body {
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: "Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
-webkit-font-smoothing: antialiased;
}
.avatar {
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
nav ul li {}
#media screen and (min-width: 640px) {}
#media screen and (min-width: 960px) {}
main {
flex: 1;
}
.intro {
display: inline-block;
width: 100%;
padding: 90px 0 120px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1 {
font-weight: medium;
text-shadow: 5px 5px 10px black;
}
h4 {}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="home.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container" style="
margin-left: 100px;">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" style="margin-left: ;" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="contact.html" title="Email" target="_blank">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>Hi, I'm Eddie.</h1>
<h4>I'm a character artist.</h4>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

As I see you want full width navbar so remove container div, Its unnecessary according to your requirement.
Also you have to change the css for navbar-brand.
Reference Link
Stack Snippet
body {
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: "Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
-webkit-font-smoothing: antialiased;
}
.avatar {
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
}
nav ul li {}
#media screen and (min-width: 640px) {}
#media screen and (min-width: 960px) {}
main {
flex: 1;
}
.intro {
display: inline-block;
width: 100%;
padding: 90px 0 120px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1 {
font-weight: medium;
text-shadow: 5px 5px 10px black;
}
h4 {}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="http://via.placeholder.com/50x50" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" style="margin-left: ;" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="contact.html" title="Email" target="_blank">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</nav>
<div class="intro">
<h1>Hi, I'm Eddie.</h1>
<h4>I'm a character artist.</h4>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

How to keep a div stayed in same position css

Well, I have a category panel picture and I am trying to create it into HTML.
I have tried this code but I hover over a category a sub_category panel appears but every panel seems to have margin at top. I want to have every panel same position just like in picture.
I tried top: 0 but it didn't have any affect. Can anyone help?
.category_nav {
height: 40px;
margin-top: 28px;
}
.category_nav_ul {
list-style-type: none;
padding: 0;
}
.category_nav_ul>li {
display: inline-block;
}
#category_nav_ul_category {
width: 380px;
cursor: pointer;
}
#category_nav_div {
margin-top: 5px;
width: 380px;
position: absolute;
background-color: white;
padding-bottom: 10px;
}
.category {
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 1px;
margin-left: 0 !important;
border-radius: 0 !important;
border: 0 !important;
}
.category:hover {
border: 2px;
background: linear-gradient(to right, red 0px, #E5002B 3px, transparent 3px);
background-color: white;
border-top: 1px solid grey !important;
border-bottom: 1px solid grey !important;
}
.fa-chevron-right {
font-weight: 100px !important;
font-size: 10px !important;
}
.left-menu-ul {
list-style: none;
}
.left-mega-menu {
background: #fff none repeat scroll 0 0;
left: 90%;
position: absolute;
top: 0;
width: 470px;
opacity: 0;
visibility: hidden;
z-index: 2345;
transition: .3s;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 60px;
}
.left-menu ul li:hover>.left-mega-menu {
opacity: 1;
visibility: visible;
left: 100%;
}
.sub_categories {
border-radius: 0 !important;
padding-top: 6px;
padding-bottom: 6px;
border-left: 2px solid #E5002B;
border-top: 0px !important;
border-right: 0px !important;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
<div class="left-menu collapse in" id="left-menu">
<nav>
<ul class="left-menu-ul list-group">
<li class="category list-group-item">
<i class="fa fa-camera fa-fw"></i>
<a href="/mystore/category/Camera">Camera
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Camera/sub_cat/">
<li class="list-group-item sub_categories">Camera</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-angle-right fa-fw"></i>
<a href="/mystore/category/Clothes">Clothes
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Clothes/sub_cat/">
<li class="list-group-item sub_categories">Clothes</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-mobile fa-fw"></i>
<a href="/mystore/category/Mobiles">Mobiles
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Mobiles/sub_cat/">
<li class="list-group-item sub_categories">Mobiles</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Tablet/sub_cat/">
<li class="list-group-item sub_categories">Tablet</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-angle-right fa-fw"></i>
<a href="/mystore/category/Graphics Cards">Graphics Cards
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Graphics Cards/sub_cat/">
<li class="list-group-item sub_categories">Graphics Cards</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Computer/sub_cat/">
<li class="list-group-item sub_categories">Computer</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/DVDs/sub_cat/">
<li class="list-group-item sub_categories">DVDs</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Laptop/sub_cat/">
<li class="list-group-item sub_categories">Laptop</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-television fa-fw"></i>
<a href="/mystore/category/Television">Television
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Television/sub_cat/">
<li class="list-group-item sub_categories">Television</li>
</a>
</div>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>

Remove position relative from category li and apply it to its parent
.left-menu-ul {
list-style: none;
position: relative;
}
fiddle

IE creates unnecessary offset on menu subitems

I'm using a bootstrap template called sb admin 2 as reference to a project.
For some reason only in IE (as always) it has a problem with an offset being created upon the submenus. Using the inspect I could see that when I marked the line-height property off and then on again, it became the same as the other browsers.
IE:
FF:
The menu it's a plugin called metismenu, and I saw at the sb admin 2 source code a piece of javascript that seems to fix the problem but didn't work for me.
I'm using the IE11 version, but I guess it'll be the same error at others.
Here's the fiddle:
https://jsfiddle.net/macmessa/ubqqs70c/
$(document).ready(function() {
/* BootStrap */
$(".menu4").addClass("navbar-default sidebar navbar-collapse").attr("role", "navigation");
$(".menu4").addClass("navbar-collapse collapse in");
$(".menu4").attr("aria-expanded", "true");
$(".menu4 ul").addClass("nav");
$(".menu4 ul ul").addClass("nav-second-level");
$(".menu4 ul ul ul").addClass("nav-third-level");
$(".menu4 li.itemPai a:not(.isParent)").append('<span class="fa arrow"></span>');
// Plugin
$('.menu4').metisMenu();
});
.menu4 ul li a {
cursor: pointer;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar ul {
width: 100%;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\25BA";
}
.sidebar .active>a>.fa.arrow:before {
content: "\25BC";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.menu4 {
width: 250px !important;
}
.sidebar {
z-index: 1;
position: absolute;
margin-top: 51px;
}
.navbar-right li {
margin-left: auto;
}
}
#media(max-width:768px) {
.menu4 {
width: auto;
}
.sidebar {
z-index: 1;
position: absolute;
width: 100%;
}
.navbar-right li {
float: left;
}
}
.navbar-right {
margin-right: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js"></script>
<div id="pagina" class="container-fluid">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navegação</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" target="_blank">
<img alt="" src="/Compartilhado/Images/logo.png" height="20" />
</a>
<a class="navbar-brand" href="/PM1.MVC/">
Projeto Modelo
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope-o fa-fw"></i>
<span class="badge">42</span>
<i class="fa fa-caret-down"></i>
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-usuario">
<li><i class="fa fa-user fa-fw"></i> Perfil do Usuário</li>
<li><i class="fa fa-gear fa-fw"></i> Configurações</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logoff</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-support fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-ajuda">
<li><i class="fa fa-book"></i> Manual</li>
</ul>
</li>
</ul>
<div class="menu4" id="mnuPrincipal">
<ul>
<li class="itemPai"><a id="mnuExemplo">Exemplo</a>
<ul>
<li><a class="isParent" href="/PM1.MVC/Menu" id="mnuExemploMenu">Menu</a></li>
<li><a class="isParent" href="/PM1.MVC/Controle" id="mnuExemploControle">Controle</a></li>
<li class="itemPai"><a id="mnuExemploMensagem">Mensagem</a>
<ul>
<li><a class="isParent" href="/PM1.MVC/MensagemAlerta" id="mnuExemploMensagemAlerta">Alerta</a></li>
<li><a class="isParent" href="/PM1.MVC/MensagemNotificacao" id="mnuExemploMensagemNotificacao">Notificacao</a></li>
</ul>
</li>
<li><a class="isParent" href="/PM1.MVC/MapaMetropolitano" id="mnuExemploMapaMetropolitano">Mapa Metropolitano</a></li>
<li><a class="isParent" href="/PM1.MVC/TratamentoErro" id="mnuExemploTratamentoErro">Tratamento de Erro</a></li>
</ul>
</li>
<li class="itemPai"><a id="mnuCadastro">Cadastro</a>
<ul>
<li><a class="isParent" href="/PM1.MVC/Usuario" id="mnuCadastroPesquisaOtimizada">Pesquisa Otimizada</a></li>
<li><a class="isParent" href="/.PM1.MVC/Item" id="mnuCadastroExemploCRUD">Exemplo CRUD</a></li>
</ul>
</li>
<li class="itemPai"><a id="mnuRelatorio">Relatório</a>
<ul>
<li><a class="isParent" id="mnuRelatorioExemplo">Exemplo de Relatório</a></li>
</ul>
</li>
<li class="itemPai"><a id="mnuUtilitario">Utilitário</a>
<ul>
<li><a class="isParent" href="/.PM1.MVC/Configuracao" id="mnuUtilitarioConfiguracao">Configuração</a></li>
<li><a class="isParent" id="mnuUtilitarioNotificacao">Notificação para Usuário</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div id="conteudo">
</div>
</div>
<div class="modal fade" id="divModalPerfilUsuario" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Perfil do Usuário</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>
Nome:
<br /> USER
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>
Login:
<br /> USR1
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>
Empresa:
<br /> C
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>
Área:
<br />
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img alt="foto" src="/Compartilhado/Images/usuarioNaoIdentificado.png" width="75" height="90" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>

You can try to put:
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
line-height:0;
color:transparent;}
and
.menu4 ul li a {
cursor: pointer;
line-height:1.45em;
}
Preview at: https://jsfiddle.net/ubqqs70c/4/