Align Title/Header with Text HTML, CSS - html

Question

I am using a centred div to contain an image and some text but want my title to have the same margin/alignment as the text. Right now the title is placed on the extreme left of the page and I want it to have a responsive margin on the left.
.row {
margin: auto;
max-width: 1150px;
display: flex;
align-items: center;
img {
width: auto;
}
}
<div class="container-fluid">
<h1>Choosing a Console</h1>
<div class="row">
<div class="col-sm" id="textbox">
<p>
Some Text
</p>
</div>
<div class="col-sm" id="img">
<img style="height: 350px" src="which.png" alt="Which One">
</div>
</div>
</div>

Answer 1

there are two ways you could do this;
Add margin-left to the div h2 tag or add a container
.row {
margin: auto;
max-width: 1150px;
display: flex;
align-items: center;
img {
width: auto;
}
}
.container-fluid h1 {
margin-left: 150px;
}
or you can over complicate it like I do and contain containers, I have added border outlines so you understand what that container is containing, if you wish to move the h1 and p text, you can margin-left them both.
.row {
max-width: 1150px;
height: auto;
border: 1px solid red;
}
.rowTextContainer {
float: left;
width: auto;
margin-left: 50px;
}
.rowText {
text-align: center;
border: 1px solid blue;
}
.row img {
width: auto;
padding-left: 20px;
}
<div class="row">
<div class="rowTextContainer">
<div class="rowText">
<h1>Title Text</h1>
<p>Text here.</p>
</div>
</div>
<img src="https://via.placeholder.com/350.png">
</div>

Answer 2

.row {
margin: auto;
max-width: 1150px;
display: flex;
flex-direction: column;
align-items: center;
}
.col-sm {
display: flex;
flex-direction: row;
margin-left: 10%;
}
img {
width: auto;
margin-left: 10px;
}
<div class="container-fluid">
<h1>Choosing a Console</h1>
<div class="row">
<div class="col-sm" id="textbox">
<p>
Some Text go ahead . . . . .
</p>
<img style="height: 350px" src="https://picsum.photos/200" alt="Which One">
</div>
</div>
</div>
I hope it will solve your problem.