How to I surround a word in a different colored box?

Hi I am trying to write the word “SCAN” with a green box around it, can you please help me? Here is what I have done so far:
But as you see the box stretches until the end of the screen…

My css:


.scan {
  color: #000000;
  padding: 5px 0 5px 0;
  text-align: left;



  <link rel="stylesheet" href="style.css">
  <cript src="Java.js"></script>  
<body class="myImage">
  <ul class="nav">
    <li class="text"><u>Frog memes</u></li>
    <li class="text"><u>Donald trump memes</u></li> 
<ul class="scan">
<p id="demo"</p>
    document.getElementById("demo").innerHTML = txt;

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


Thanks for clearing that up :smile:

That’s occuring because <ul> (the element that you applied the scan class to) is considered to be a block-level element, and block-level elements span the entire width of the viewport by default.

So one way to achieved your desired effect is to change it to an inline-block (or inline) element instead, so that it doesn’t span the width of the viewport. I’ll leave that as an exercise for you as to how to do that. :wink:

This might help you in understanding inline vs block:

Thank you astv99 I will try when I get home :slight_smile:

-Thank you :slight_smile:

@ols500 You should mark @astv99 's post as the solution if that’s what helped you. :wink: