Bootstrap, CSS - span within row auto indenting - css

Question

In my project, I implement bootstrap and I use it's grid system. I create a row, and then I add a span inside the row which acts as a column (col-12).
This span I use is underlined, and I add <br> elements within the span to separate line. The first line auto-indents to the right more than the other two lines. I attempt to use the tag, however this doesn't work as my text is underlined and it creates an unwanted underline before the text.
Does anybody know the issue? Thank you.
Here is my code:
.mainBodyTxt {
color: white;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 54px;
z-index: 2;
left: 200px;
}
.container-fluid {
background:lightgrey;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<!-- <div class="col-md-4 col-lg-6">-->
<u style="color: white;"><span class="col-12 mainBodyTxt">I really like <br>
Blue <br>Sandwiches</span> </u>
</div>
</div>

Answer 1

Your layout is giving you a right indentation probably because you're using a <u> outside the <span class='col-12'>
col-x elements should be direct descendants of row elements!
To solve this, you could:
Put the <u> tag inside the span (example 1)
Remove the <u> tag and give span the CSS attribute text-decoration:underline (example 2)
Remove the <span> tag and give u the classes col-12 mainBodyTxt (example 3)
.mainBodyTxt {
color: white;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 54px;
z-index: 2;
left: 200px;
}
.container-fluid {
background:lightgrey;
}
.mainBodyTxtUnderlined{
color: white;
text-decoration:underline;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 54px;
z-index: 2;
left: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">
<!-- example 1 -->
<div class="container-fluid">
<div class="row">
<span class="col-12 mainBodyTxt"><u style="color: white;">I really like <br>
Blue <br>Sandwiches</u></span>
</div>
</div>
<br>
<!-- example 2 -->
<div class="container-fluid">
<div class="row">
<span class="col-12 mainBodyTxtUnderlined">I really like <br>
Blue <br>Sandwiches</span>
</div>
</div>
<br>
<!-- example 3 -->
<div class="container-fluid">
<div class="row">
<u class="col-12 mainBodyTxt">I really like <br>
Blue <br>Sandwiches</u>
</div>
</div>