Bootstrap positioning not working - html

Question

Just currently working on my site and using bootstrap to help me as i was told it was a great framework to use. Anyway i am currently having a problem putting text in the header and positioning it in the right place.
My html code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class = "Text">
<a class="navbar-brand" href="#">
<h1>Text1</h1>
<h2>Text2</h2>
<h3>Joruney</h3>
<p>Starting to work around here</p>
</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class = "nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li class="dropdown">
Text<b class="caret"></b>
<ul class="dropdown-menu">
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
CSS:
.navbar-default {
background-color: #760003;
padding: 30px;
}
.Text h1 {
font-family: "Times New Roman", Georgia, Serif;
font-size: 59px;
margin-top: -30px;
float: left;
padding-left: 10px;
}
.Text h2 {
font-family: "Times New Roman", Georgia, Serif;
font-size: 65px;
margin-top: 7px;
margin-bottom: -25px;
margin-top: -22px;
padding-right: 6px;
float: left;
}
.Text h3 {
font-family: "Times New Roman", Georgia, Serif;
font-size: 44px;
margin-top: -17px;
padding-top: 0px;
float: left;
}
.Text p{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin-top: 35px;
float: left;
}
So i am trying to ahive by getting it to look like:
Text1 Text2 Text 3
Starting to work around here
However what its actually looking like is:
Text1 Text2 Text3
Starting to work around here
I cant get the p tag to move under it. Now i tried to use position: absolute; however when i resize the page its not mobile friendly at all. It looks awful but i can get it in the right place.
Could anyone help me with this problem so that i can get the text to go under the three text headers and when it resizes it will all stay in that same block and never move but just get smaller?
Thanks for all the help
To give an example of what i was trying to get
Example
U an see Text 1 Text 2 and Text3 are there
and then the p tag is below.

Answer 1

Okay I have created what you have asked for, you should look at the CSS properties text-align and display
I have created a ul with three li
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class = "Text">
<a class="navbar-brand" href="#">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<h6>This is below</h6>
</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class = "nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li class="dropdown">
Text<b class="caret"></b>
<ul class="dropdown-menu">
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
CSS:
.navbar-default {
background-color: #760003;
padding: 20px;
}
.Text ul {
font-size: 20px;
margin-top: -30px;
margin-left: 0;
margin-bottom: 0;
list-style: none;
padding: 0;
text-align: center;
}
.Text ul li {
display: inline-block;
}
.Text h6 {
margin-top: 0;
font-size: 26px;
text-align: center;
}
This was done very fast to give you an idea of how to do it, you should look at the Bootstrap Documentation and learn about the CSS positioning
https://getbootstrap.com/components
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference