Fix CSS on Octopress. - css

Question

I followed http://www.undefinednull.com/2013/10/15/octopress-blog-tweaks-adding-author-information-section-below-each-posts/ and weird part is his CSS code works and floats up aligning text beside to that of the picture.
While in my case, I get this as shown below:
As you see, the text isn't oriented in a proper way as the original source code seemed to have piled up. I invested a ton of amout into the same and came across his CSS repositories at Github which is https://github.com/shidhincr/shidhincr.github.com/blob/source/source/_includes/custom/aboutauthor.html using the CSS at https://github.com/shidhincr/shidhincr.github.com/blob/source/sass/custom/_styles.scss.
I got mimicry version of the exact layout but unable to indent text beside the image as it is shown as below as an example here:
I have tried all of it and here's a complete scss source of what I am using:
For layout as .html
<div class="about">
<span class="about-image">
<img alt="shritam" src="/images/author.jpg">
</span>
<span class="about-desc">
<span style="float:right;">
<em>Hello. Welcome to pwntoken. I am an Information Security Analyst cum Penetration Tester. I do Application Security and here's my <a target="_blank" href="https://www.linkedin.com/in/shritambhowmick"> LinkedIn </a> for a professional touch. Feel free to discuss about the post content and you can send me feedbacks, if any, at:</em> <img style="border:none" alt="shritam_email" src="/images/email.png">
</span>
<br/>
<hr/>
Follow #pwntoken
</span>
</div>
The original source CSS what I am using _styles.scss which is a preprocessor used in Octopress to process all CSS content:
// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much
#content table:not(.highlight table) {
border: 1px solid #e7e3e7;
margin-bottom: 1.5em; // to match p style
th, td {
border: 1px dashed #e7e3e7;
padding: 0 5px;
}
th {
border-style: solid;
font-weight: bold;
background: url("/images/noise.png") repeat scroll left top #f7f3f7;
}
th[align="left"], td[align="left"] {
text-align: left;
}
th[align="right"], td[align="right"] {
text-align: right;
}
th[align="center"], td[align="center"] {
text-align: center;
}
}
body > footer {
#include shadow-box(none,0 15px 15px #333,0.3);
margin-bottom: 10px;
}
.about {
font-style: italic;
background-color: #FFF;
padding: 10px;
border: #e2edf2 2px dashed;
background-color: #f4f8fa;
overflow: hidden;
clear: both;
.about-image {
width: 150px;
float: left;
display: inline-flexbox;
margin-right: 20px;
img {
border-radius: 50%;
}
}
.about-desc > hr {
border: none;
border-top: 1px solid #fff;
padding-top: 10px;
box-shadow: 0 -1px 0 #CBCED1;
float: right;
}
#twitter-widget-1 {
float: right
}
&.sidebar {
border: none;
background-color: transparent;
box-shadow: none;
text-align: center;
.about-image,#twitter-widget-1 {
float: none;
}
.about-desc {
display: block;
a {
color: rgb(47, 99, 211);
}
}
.about-image {
img {
border-radius: 50%;
box-shadow: 0px 0px 0px 10px rgba(221, 214, 214, 0.2);
border: 10px solid rgba(151, 151, 151, 0.2);
}
}
#media only screen and (max-width: 768px) {
display: none;
}
}
}
.blog-index + aside.sidebar {
.about.sidebar {
#media only screen and (max-width: 768px) {
display: block;
}
}
}
li.related {
padding-bottom: 10px;
a {
color: #F55A0A;
font-size: 22px;
}
a:hover {
border-bottom: 2px dashed #F9A67B;
}
}
I am not a CSS expert and I wonder how shall i fix this?

Answer 1

In
<span class="about-desc">
<span style="float:right;">
remove the inline style style="float:right;".