Can't move cursor all the way across the line

In the line I’m supposed to edit, Line 37 (with the “Like” button), I can only move the cursor to the right six places, then it goes to the next line, as if there isn’t any more text, and starts at the next line. I can’t click within the line to place the cursor there, either.

Challenge Taste the Bootstrap Button Color Rainbow has an issue. User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36. Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>

  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
  <button class="btn btn-block">Like</button>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

[katgirl28888]

I have this problem frequently. It’s not challenge specific; after you load a page (I’m using chrome, looks like the poster is using firefox), you have to type somewhere in the code box to reset it to the correct line. It looks like what’s happening is the clicking in the box is misaligning the cursor (usually below) or maybe the text is being displayed a line above where it should be? Example:

  <button class="btn btn-block ">Like</button>
  <p>Things cats love:</p>

If I click at the end of </button>, you’d expect the blinking cursor to show up there. Instead, it shows up in line with the end of </p>, (about between the b and l in "btn-block"). If I begin typing, it shifts the cursor down a line and inserts text at the end of the second line, not where I clicked, at the end of the first. After it’s fixed once, it usually doesn’t happen again unless I reload the page or go to a different one.

It doesn’t happen every time and whatever’s causing it to happen seems arbitrary, but this is definitely an issue

[ooade]

Works fine here… Can’t reproduce