Injecting custom CSS to override specific object formats - advice - html

Question

Newbie here. I'm re-learning web on HTML5 - customizing a blogger site to cut-my-teeth. I've been able to change a lot from the defaults (w3schools is invaluable!) but I'm getting stuck when trying to change formats for specific objects.
Three things I can't figure out as examples (site www.paddlebeforethewave.com)
1) Featured Post (top) - image wrapping text is a default behavior for blog posts that isn't followed for featured post. I was able to change the image/size position as below - but can't figure out how to have text wrap the image.
.FeaturedPost .snippet-thumbnail img {
max-width: 100px;
float: left;
margin: 0px;
padding: 0px;
display: inline;
}
2) Featured post (top) - I want to change background color of only the featuredpost. I've tried to identify and modify it as follows - but no effect.
.Blog .blog-posts .post-outer-container, #page_body .FeaturedPost {
background: $(posts.background.color);
min-height: 40px;
padding: 30px 40px;
width: auto;
}
OR
.FeaturedPost .bgcolor {
background-color: #cfe2f3;
}
OR
many permutations of above
3) Page 2 content - I created a second page (http://www.paddlebeforethewave.com/p/contact.html) and the formatting is lost for vertical padding and location of page labels.
Is my approach flawed? Could you use one fix as example (I want to learn!)
thank you!
Screenshot for (1) and (2)

Answer 1

1) Add the following code to your theme:
.FeaturedPost .snippet-thumbnail,
.FeaturedPost .post-snippet {
display: inline;
}
2) Your approach is fine, if you haven't seen any changes, try to clear your browser cache. Correct classes for featured post are:
.Blog .post-outer-container, #page_body .FeaturedPost {
}
3) I'm not sure I can see the problem. Could you provide a screenshot, please?
EDIT:
Found it! Go to your theme code and add following property to this class:
.item-view .blog-name {
-webkit-flex-flow: column;
flex-flow: column;
}

Answer 2

I see you fixed your problem I did however see an issue on your site. For big screens a white bar appears if the screen is larger than 1800px.
You can fix this by finding this code in your CSS
.sidebar-container
and adding
display:none;
You could test this in your browser by zooming out until the bar appears. Cheers