Trying to remove all styles from image in header - html

Question

I want to add a linkedin icon (id="linkedin") on the right of my nav bar. I figured the simplest way would be to add a new UL element to the nav but that stretches the image and I can't get the applied styles to go away.
I've tried all:initial and all:revert but they don't seem to work.
You'll want to open the snippet on full page.
.container {
position: relative;
margin: 0 auto;
width: 94%;
max-width: 1100px; /*Stops the nav from expanding too far*/
font-family: helvetica, sans-serif;
}
#nav {
position: absolute; /*Positions nav elements within black space*/
right: 0; /*Positions nav elements to right of screen*/
top: -15px; /*Positions nav elements to top of screen*/
height: 60px;
text-transform: uppercase;
font-weight: bold;
}
#header {
z-index: 2; /*Puts elements in front of other elemtns*/
position: fixed;
width: 100%; /*Makes nav stretch to screen*/
height: 60px; /*Specifies black background height*/
line-height: 60px; /*Vertically centers nav text*/
background: #222;
color: white; /*Text color*/
}
/*LOGO*/
#header img {
width: 180px;
height: 60px;
}
#header h1 {
top: 0px;
margin: 0px;
font-size: 1.75em;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
display: block;
color: white;
text-decoration: none;
padding: 0 10px;
}
/*Nav Dropdown*/
ul ul {
display: none;
position: absolute;
background: #222;
padding: 0;
white-space: nowrap; /*Prevents dropdown elements from wrapping*/
}
#nav ul ul li {
float: none;
}
> ul {
display: block;
}
#linkedin {
all: revert;
}
/**********RESPONSIVE**********/
/* unvisited link */
a:link {
color: blue;
}
/* mouse over link - Nav*/
#nav a:hover {
color: black;
background-color: gold;
}
/* mouse over link - regular*/
.back a:hover {
color: blue;
}
/* selected link */
a:active {
color: blue;
}
/*Inactive Link*/
.inactivelink {
cursor: default;
}
<header id="header">
<div class="container">
<img src="#" alt="LOGO"/>
<nav id="nav">
<ul>
<li>Portfolio
</li>
<li>
Projects
<ul>
<li>BOOK REVIEW SITE</li>
<li><a href="#" style="";>DEMO CODE (under development)</a></li>
</ul>
</li>
<li>
Contact
<ul>
<li><p style="color:#449ff4">LinkedIn</p></li>
<li>Email Me</li>
</ul>
</li>
<li>
<img id="linkedin" src="#" alt="LinkedIn icon" height="10" width="10">
</li>
</ul>
</nav>
</div>
</header>

Answer 1

I would first load a reset stylesheet before your own, so it will get rid of whatever you are inheriting. I imagine this will fix it.
http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/

Answer 2

There's a CSS rule for `'header img' in your styles which forces all images in the header to have 180px width. To overwrite that for your linkedin icon and display it in its original size, add this CSS at the end of your stylesheet:
#header #linkedin {
width: auto;
height: auto;
vertical-align: middle;
}
If the icon is displayed too big or too small that way, just use your desired size instead of auto, but only on one of the two /width/height) - the other will adjust automatically.
.container {
position: relative;
margin: 0 auto;
width: 94%;
max-width: 1100px;
/*Stops the nav from expanding too far*/
font-family: helvetica, sans-serif;
}
#nav {
position: absolute;
/*Positions nav elements within black space*/
right: 0;
/*Positions nav elements to right of screen*/
top: -15px;
/*Positions nav elements to top of screen*/
height: 60px;
text-transform: uppercase;
font-weight: bold;
}
#header {
z-index: 2;
/*Puts elements in front of other elemtns*/
position: fixed;
width: 100%;
/*Makes nav stretch to screen*/
height: 60px;
/*Specifies black background height*/
line-height: 60px;
/*Vertically centers nav text*/
background: #222;
color: white;
/*Text color*/
}
/*LOGO*/
#header img {
width: 180px;
height: 60px;
}
#header h1 {
top: 0px;
margin: 0px;
font-size: 1.75em;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
display: block;
color: white;
text-decoration: none;
padding: 0 10px;
}
/*Nav Dropdown*/
ul ul {
display: none;
position: absolute;
background: #222;
padding: 0;
white-space: nowrap;
/*Prevents dropdown elements from wrapping*/
}
#nav ul ul li {
float: none;
}
>ul {
display: block;
}
#linkedin {
all: revert;
}
/**********RESPONSIVE**********/
/* unvisited link */
a:link {
color: blue;
}
/* mouse over link - Nav*/
#nav a:hover {
color: black;
background-color: gold;
}
/* mouse over link - regular*/
.back a:hover {
color: blue;
}
/* selected link */
a:active {
color: blue;
}
/*Inactive Link*/
.inactivelink {
cursor: default;
}
#header #linkedin {
width: auto;
height: auto;
vertical-align: middle;
}
<header id="header">
<div class="container">
<img src="#" alt="LOGO" />
<nav id="nav">
<ul>
<li>Portfolio
</li>
<li>
Projects
<ul>
<li>BOOK REVIEW SITE</li>
<li><a href="#" style="" ;>DEMO CODE (under development)</a></li>
</ul>
</li>
<li>
Contact
<ul>
<li>
<a href="#">
<p style="color:#449ff4">LinkedIn</p>
</a>
</li>
<li>Email Me</li>
</ul>
</li>
<li>
<img id="linkedin" src="http://placehold.it/30x30/0fa" alt="LinkedIn icon" height="10" width="10">
</li>
</ul>
</nav>
</div>
</header>