Text with background coloring only

My text background always extends beyond the screen. Can anyone help me figure out what I'm doing wrong?

Here is the HTML code:

<div class="textSlide">
   <span id="firstTitle">We assist you in finding all the individuals you</span>
   <span id="secondTitle">need to kickstart your project.</span>
   <span id="thirdTitle">Look Ouch serves as an online hub where artists of all kinds can come together to bring ideas to life.</span>
   <span id="fourthTitle">.</span>
</div>

And here is the CSS code:

.textSlide span { 
  z-index: 999; 
  position: relative; 
  margin-left: 10%; 
  font-family: Montserrat; 
  display: block; 
  padding: 5px; 
}
.textSlide #firstTitle { 
  margin-top: 120px; 
  font-size: 34px; 
  font-weight: bold; 
  background-color: #7d37e6; 
  color: #fff; 
}
.textSlide #secondTitle { 
  font-size: 34px; 
  font-weight: bold; 
  margin-top: 5px;
  background-color: #7d37e6; 
  color: #fff; 
}
.textSlide #thirdTitle { 
  font-size: 18px; 
  margin-top: 12px; 
  background-color: #7933e1; 
  color: #fff; 
}
.textSlide #fourthTitle { 
  font-size: 18px; 
  margin-top: 5px; 
  background-color: #7933e1; 
  color: #fff; 
}

FIDDLE

Answer №2

.textSlide span { 
  z-index: 999; 
  position: relative; 
  margin-left: 10%; 
  font-family: Montserrat; 
  display: inline-block; 
  padding: 5px; 
}
.textSlide #firstTitle { 
  margin-top: 120px; 
  font-size: 34px; 
  font-weight: bold; 
  background-color: #7d37e6; 
  color: #fff; 
}
.textSlide #secondTitle { 
  font-size: 34px; 
  font-weight: bold; 
  margin-top: 5px; 
  background-color: #7d37e6; 
  color: #fff; 
}
.textSlide #thirdTitle { 
  font-size: 18px; 
  margin-top: 12px; 
  background-color: #7933e1; 
  color: #fff; 
}
.textSlide #fourthTitle { 
  font-size: 18px; 
  margin-top: 5px; 
  background-color: #7933e1; 
  color: #fff; 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Overlapping Divs and Colliding Elements

I am currently exploring the moment when my two yellow divs will overlap and make contact with each other. It seems that the collision detection is triggering true even when the divs are not intersecting. If you'd like to take a look at the example, ...

Tips for preventing the colors of all buttons from changing when only one is clicked in JavaScript

const tasks = `[{ "taskName": "Task 1", "image": "./images/task1.jpg", "description": "Task 1 description", "importance": 0 }, { "taskName": "Task 2", "image": "./images/task2.jpg", "description": "Task 2 description", ...

Checking boxes on Android for compatibility with Firefox, Chrome, and Internet Explorer 8

Could anyone assist me with finding Android checkboxes styled with CSS and/or jQuery for my project? I haven't been able to find any resources or plugins that could help. Any links you can provide would be greatly appreciated as I've come up empt ...

Half-extended Bootstrap 4 container reaching the edge of the page

I'm looking to create a layout with a .container that consists of two distinct halves. The left half should function as a standard .col-6, while the right half should extend all the way to the edge of the screen, similar to a .col-6 within a .contain ...

Ensure that the Nivo Slider height is set to the accurate final value before the images finish loading

I've integrated Nivo Slider into my responsive website to display an image gallery. The slider spans 100% width and adjusts its height based on the aspect ratio of the images (all images have the same height). However, if the user's connection i ...

Concealed Sub Menus Within a Vertical Navigation Bar

I've successfully created a Vertical Menu with hidden submenus, but I'm struggling to make the submenu appear on hover. Any suggestions on how to achieve this? Also, I'd like to align the text all the way to the left and remove the bullets f ...

Updating Navigation Bar Font

I am a novice in the process of constructing my own navigation bar for my website, and I am encountering difficulties when trying to customize the font (color, font-family, etc). Currently, the links in my navigation bar (such as home, contact, store, etc ...

Issues with the panel's scroll bar functionality in an HTML document

I am currently working with Bootstrap HTML 5 where I have a panel containing a table. Although I have set scroll for the panel, the table is not adjusting properly within the panel and the scrollbar appears inactive. My goal is to ensure that each header c ...

What is the best way to generate a box when a button is pushed?

How can I make a button create a box with text inside it when clicked? <div class="trades"> </div> <button onclick="create()">add</button> Here is the JavaScript function to create the box: function create() { var box = docu ...

Tips for Maintaining Consistent Height and Width of Cards

My latest project involves a code snippet with 3 CSS cards displayed in a row using bootstrap. <div class="container mt-4"> <div class="row"> <div class="col-auto mb-3"> ...

Inconsistencies observed during the native JSON import process in JavaScript

Encountered a strange behavior when loading a JSON file into JavaScript while working on a React project. Seeking an explanation and guidance on properly accessing data from the JSON data store. The JSON file contains product data: { "product ...

What is the best way to relocate the box within this HTML/CSS document?

Looking at this specific HTML webpage <html> <head> <title>CSS Structure</title> <link href="layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">Header 900x100 px</div> ...

The battle between "this" in HTML and AngularJS ng-model

We have been working on updating an old ColdFusion application that utilized "this" with a formatting function: <td>$<input type="text" name="txtTaxProration" id="txtTaxProration" value="0.00" alt="Tax Proration" onblur="dollarBlur(this);">< ...

To reveal more options, simply click on the button to open up a dropdown

I am currently utilizing the Bootstrap 5 CDN and I am looking for a way to automatically open the dropdown menu without having to physically click on it. Within the navbar, I want to display the "Dropdown Link": <nav class="navbar navbar-expand-sm ...

Display XML elements on hover with a Bootstrap tooltip

I am attempting to showcase an XML snippet in my title attribute, similar to the example below. I understand that removing data-html="true" or changing it to false will resolve the issue. However, I also require a label in my title resembling the <stro ...

Is there a way to differentiate the color of an active link from an inactive one, so users can easily identify which link they are currently viewing?

How can I customize the color of text for the active page on my website's sidebar? For example, I have two hyperlinks, one for HOME and one for ABOUT. When a user clicks on the HOME link, I want the text color to change to green while the ABOUT link r ...

When the span element's height is set to 100%, it does not automatically match the height of its parent div

I have a scenario where I am working with two div elements and a span element in between. The parent div element does not have a defined height, it is calculated based on the content within the div. However, the span element's height is set to 100% ev ...

Bug in ZURB Foundation Topbar causes incorrect highlighting of links on mobile when clicked

While utilizing the ZURB Foundation Topbar, I have encountered a bug that I find frustrating. When navigating the 2nd level drop downs and clicking on a link (li elements), the active highlight flickers to one of the elements above before taking you to the ...

Aligning icons side by side using only CSS styling

I'm having trouble positioning icons next to each other horizontally and they keep stacking on top of one another. Can you please review my CSS code to see if I made a mistake? Here is the CSS: #social { top:20px; left:30px; height:32px; width:200p ...

What is the best way to show toast notifications for various selections in a dropdown menu?

I have a dropdown menu labeled "FavoriteFoods" that includes options such as "Pizza," "Sushi," "Burgers," and "Biryani." When one of these food choices is selected from the dropdown, I would like a toast pop-up to appear with the message "Great choice!" ...