Cleaning up the mess
First, we will stop the line from breaking in the Ctrl + D text in the second row of our design. For fixing this issue, we will create our first line of CSS code. Add the <head> tag to a custom CSS file. Remember to place it below the bootstrap.css import line:
<link rel="stylesheet" href="css/base.css">
In the base.css file, create a helper class rule for .nowrap:
.nowrap {
white-space: nowrap;
}In the HTML file, add the created class to the <kbd> element (line 43):
<kbd class="nowrap"><kbd>ctrl</kbd> + <kbd>d</kbd></kbd>
Reload the page and you'll see that one problem is solved. Now, let's fix the horizontal scroll. Can you figure out what is making the unintended horizontal scroll? A tip, the problem is in the table!
Tip
What is the meaning of the white-space CSS property?
The white-space property specifies how whitespace is handled inside an element. The default is normal...
