Display: block showing all my <span>s inline - html

Question

I am just learning CSS so this is probably something super basic that I am just messing up. I have a page with 2 header divs one main content div and a footer div. I just have an image and a couple of lines of text in the main content div and I want them to display vertically. I have the text broken up like I want with spans and have display:block in the CSS for the div. I thought this would display everything vertically but it is still displaying all in one line.
I appreciate any help you can provide.
#a {
border: 2px solid #000000;
float: left;
margin: 10px 0px;
width: 30%;
}
#b {
border: 2px solid #000000;
float: right;
margin: 10px 0px;
width: 60%;
}
#c {
border: 2px solid #000000;
margin: 10px 0;
padding: 50px;
display: block;
text-align: center;
}
#d {
border: 2px solid #000000;
margin: 10px 0;
padding: 50px;
}
#e {
border:2px solid #000000;
margin: 10px 0;
width: 100%;
overflow: hidden;
}
img {
width: 150px;
height: 150px
}
Relating to this HTML
<div id="c">
<span><img src="../blog/assets/profile1.png" alt="Picture of Sid Watal"/></span>
<span>There and Back</span>
<span>My journey</span>
</div>
The image and following spans are all being displayed inline. There is currently no content in the other divs.
Thank you for your help.

Answer 1

<span>'s by default are inline.
You should be using divs if you want blocks. But if you want to force the span's in your html to be blocks (you shouldn't - you should change them to divs), just do this:
#c span { display: block; }

Answer 2

The easiest way to do this is remove the <span> tags, replacing them with <div>
The span tag is becoming redundant, I never use it any more as a DIV behave much better in all situations. Span doesn't like to be stylised.
Keep your CSS the same.
Your new HTML:
<div id="c">
<div><img src="../blog/assets/profile1.png" alt="Picture of Sid Watal"/></div>
<div>There and Back</div>
<div>My journey</div>
</div>