This week, I delved into learning HTML with the goal of creating my own website using bootstrap. However, I encountered a perplexing error - code that should display two pieces of text on the same line is behaving inconsistently for seemingly identical snippets.
Below is the code in question:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<!-- Below: My original code simplified to its core -->
<div class=“row”>
<div class="col-4">
I'm foo
</div>
<div class="col-8">
I'm bar
</div>
</div>
<!-- Below: Code borrowed from a CSS grid tutorial -->
<div class="row">
<div class="col-4">
I'm foo
</div>
<div class="col-8">
I'm bar
</div>
</div>
</div>
</body>
</html>
I tested this code locally and online, leading to different results as shown here: https://i.sstatic.net/TTZ0n.png
Why is the output inconsistent? What causes the indentation in one row but not the other? Even switching the order of the rows didn't resolve the issue. I'm puzzled and would appreciate any assistance you can provide.