image becomes large after adding a float/clear property to it? - html

Question

I am trying to make a bottom sidebar with social media icons using float and clear properties. All of the icons are floated left, except for the twitter icon which is clearright. Why is the icon for twitter larger than the other icons? However, it is the same size when it's floated left.
I'd like for it to be the same size as the other icons and stay in that far right corner position. Or at least be centered without a lot of space in between the icons... How do I fix this? What am I doing wrong?
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Poppins');
html {
font-size: 1em;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
}
/*logo*/
#logo {
float: left;
width: 5.5em;
background-color: white;
position: relative;
top: -2em;
}
/*pagewrapper*/
.pageWrapper {
width: 1000px;
margin: 0 auto;
padding: 2em;
margin-top: 1.5em;
margin-bottom: 1.5em;
border-style: double;
border-width: thick;
border-color: #7BDFF2;
overflow: auto;
}
/*menu*/
#nav_menu ul {
list-style-type: none;
}
#nav_menu ul li {
float: left;
margin-left: 6em;
margin-right: 4em;
}
#nav_menu li a {
text-align: center;
display: block;
width: 9em;
padding: .9em 0;
text-decoration: none;
background-color: #7BDFF2;
color: #eff7f6;
font-weight: bold;
border-radius: 1em;
}
#nav_menu li a:hover {
color: #f7d6e0;
}
#nav_menu li a:active {
color: #b2f7ef;
}
a {
text-transform: uppercase;
font-weight: bold;
color: #f2b5d4;
}
a:active {
color: #ffcdee;
}
a:hover {
color: #eff7f6;
}
/*copyright*/
footer {
text-align: center;
font-weight: 100;
font-size: .7em;
}
/* aside */
#socialmedia {
width: 80%;
margin: 0 auto;
margin-top: 2em;
}
#socialmedia h3 {
text-transform: lowercase;
color: #fff;
margin: 0 auto;
background-color: #f2b5d4;
letter-spacing: .9em;
font-size: .8em;
width: 100%;
height: 100%;
border-style: dotted;
border-color: #eff7f6;
text-align: center;
border-width: thin;
}
#socialmedia img {
width: 10%;
height: auto;
}
/*youtube embed video*/
.video iframe,
.video object,
.video embed {
display: block;
margin: 0 auto;
top: 0;
left: 0;
padding-top: 1em;
clear: both;
}
h1 {
font-weight: bold;
text-align: center;
font-size: 2em;
position: relative;
right: .5em;
bottom: -2em;
}
h2 {
font-weight: 200;
text-align: left;
}
.member {
margin-top: 3em;
}
.p album {
margin-top: .3em;
}
/*albums*/
.album {
border: dotted #000 .2em;
border-radius: .5em;
width: 20em;
min-height: 20em;
font-size: 1em;
margin-top: 5em;
margin: 1em;
padding: 1em;
}
#album img {
height: auto;
max-width: 100%;
}
/*floats and clears*/
.left {
float: left;
}
.right {
float: right;
}
.clearleft {
clear: left;
}
.clearright {
clear: right;
}
.clearboth {
clear: both;
}
<aside id="socialmedia">
<h3>social media</h3>
<div class="ig left">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2016/240/iconmonstr-instagram-13.png" alt="instagram logo">
</div>
<div class="fb left">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-facebook-3.png" alt="facebook logo">
</div>
<div class="yt left">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2013/240/iconmonstr-youtube-8.png" alt="youtube logo">
</div>
<div class="twt clearright">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-twitter-3.png" alt="twitter logo">
</div>
</aside>

Answer 1

You can make them 10% wide with 20% margin between the first three. 10% x 4 = 40%. 20% * 3 = 60%. 40% + 60% = 100%
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Poppins');
html {
font-size: 1em;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
}
/*logo*/
#logo {
float: left;
width: 5.5em;
background-color: white;
position: relative;
top: -2em;
}
/*pagewrapper*/
.pageWrapper {
width: 1000px;
margin: 0 auto;
padding: 2em;
margin-top: 1.5em;
margin-bottom: 1.5em;
border-style: double;
border-width: thick;
border-color: #7BDFF2;
overflow: auto;
}
/*menu*/
#nav_menu ul {
list-style-type: none;
}
#nav_menu ul li {
float: left;
margin-left: 6em;
margin-right: 4em;
}
#nav_menu li a {
text-align: center;
display: block;
width: 9em;
padding: .9em 0;
text-decoration: none;
background-color: #7BDFF2;
color: #eff7f6;
font-weight: bold;
border-radius: 1em;
}
#nav_menu li a:hover {
color: #f7d6e0;
}
#nav_menu li a:active {
color: #b2f7ef;
}
a {
text-transform: uppercase;
font-weight: bold;
color: #f2b5d4;
}
a:active {
color: #ffcdee;
}
a:hover {
color: #eff7f6;
}
/*copyright*/
footer {
text-align: center;
font-weight: 100;
font-size: .7em;
}
/* aside */
#socialmedia {
width: 80%;
margin: 0 auto;
margin-top: 2em;
}
#socialmedia h3 {
text-transform: lowercase;
color: #fff;
margin: 0 auto;
background-color: #f2b5d4;
letter-spacing: .9em;
font-size: .8em;
width: 100%;
height: 100%;
border-style: dotted;
border-color: #eff7f6;
text-align: center;
border-width: thin;
}
#socialmedia img {
max-width: 100%;
height: auto;
}
/*youtube embed video*/
.video iframe,
.video object,
.video embed {
display: block;
margin: 0 auto;
top: 0;
left: 0;
padding-top: 1em;
clear: both;
}
h1 {
font-weight: bold;
text-align: center;
font-size: 2em;
position: relative;
right: .5em;
bottom: -2em;
}
h2 {
font-weight: 200;
text-align: left;
}
.member {
margin-top: 3em;
}
.p album {
margin-top: .3em;
}
/*albums*/
.album {
border: dotted #000 .2em;
border-radius: .5em;
width: 20em;
min-height: 20em;
font-size: 1em;
margin-top: 5em;
margin: 1em;
padding: 1em;
}
#album img {
height: auto;
max-width: 100%;
}
/*floats and clears*/
.left {
float: left;
}
.right {
float: right;
}
.clearleft {
clear: left;
}
.clearright {
clear: right;
}
.clearboth {
clear: both;
}
.icons:last-child {
justify-content: center;
}
#socialmedia > div {
float: left;
width: 10%;
}
#socialmedia > div:not(:last-child) {
margin-right: 20%;
}
<aside id="socialmedia">
<h3>social media</h3>
<div class="ig">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2016/240/iconmonstr-instagram-13.png" alt="instagram logo">
</div>
<div class="fb">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-facebook-3.png" alt="facebook logo">
</div>
<div class="yt">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2013/240/iconmonstr-youtube-8.png" alt="youtube logo">
</div>
<div class="twt">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-twitter-3.png" alt="twitter logo">
</div>
</aside>