Having difficulty reaching a div element using either its id or class in a CSS stylesheet

I'm having trouble adding padding to the home section div and I can't seem to access it using either the id or class. Any suggestions on how to solve this issue would be greatly appreciated.

Below is the CSS code:

body {
    margin: 0 ;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
}


.header .navbar {
    padding: 0;
}

.home-section {
    background-color: red!important;
    padding: 250px 0px 200px;
}

Here is the div I'm trying to access in index.php:

<body>
    <div class="container home-section">
        <div class="row">
            <div class="col-lg-6">
                <div class="home-content">
                    <h1>Awesome Product</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                    <a href="#">Buy For ₹150</a>
                </div>
            </div>
        </div>
    </div>
htmlcssbootstrap-4

Answer №1

After testing the code you provided, everything worked flawlessly. If you encounter any issues, it could be due to a caching problem in your browser, which is a common occurrence with Chrome. In such cases, try checking the results in an incognito window.

<style>
body {
    margin: 0 ;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
}

.header .navbar {
    padding: 0;
}

.home-section {
    background-color: red!important;
    padding: 250px 0px 200px;
}
</style>
<body>
    <div class="container home-section">
        <div class="row">
            <div class="col-lg-6">
                <div class="home-content">
                    <h1>Awesome Product</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                    <a href="#">Buy For ₹150</a>
                </div>
            </div>
        </div>
    </div>

Answer №2

body {
    margin: 0 ;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
}


.header .navbar {
    padding: 0;
}

.home-section {
    background-color: red!important;
    padding: 250px 0px 200px;
}
    <div class="container home-section">
        <div class="row">
            <div class="col-lg-6">
                <div class="home-content">
                    <h1>Amazing Product</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                    <a href="#">Purchase For ₹150</a>
                </div>
            </div>
        </div>
    </div>

I tested your code and it is functioning correctly. It's possible that there may be some issues with your browser, which can happen at times. Try running your code in an incognito tab.

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

What is the best way to adjust the footer width to match the sidebar using Bootstrap 5?

Currently working on a Bootstrap 5 template for my website, but being new to it makes it a bit challenging. Specifically struggling with aligning the footer to fit the full width of the sidebar. <!DOCTYPE html> <html lang="en"> <head&g ...

htmlcssbootstrap-5

Enhance your website with Jquery-powered page transitions that can easily be linked for a

I have a client who has a specific vision for their website. To demonstrate the concept, I've created a demo which can be viewed here: She requested page transitions similar to those in the demo for the main content. I used jQuery to implement this ...

jqueryhtmlanimationtransition

The ng-include directive is having trouble finding the partial HTML files

I've been working on setting up a basic tabset with each tab pulling content from a separate partial view with its own controller. To test everything out, I created three dummy HTML files with simple text only. However, I'm having trouble getting ...

javascripthtmlangularjsasp.net-mvcangularjs-ng-include

The `<Outlet/>` from react-router is being rendered in a location outside of its intended wrapper div

Utilizing MUI for crafting a straightforward dashboard featuring an <AppBar>, a side <Drawer>, my component appears as follows: <> <AppBar> // code omitted <AppBar/> <Drawer> // code omitted <Drawer/> / ...

javascriptcssreactjsmaterial-uireact-router

Choose the immediate sibling located right after a specific element

My goal is to have the second paragraph following a h1 element display a dropcap, with the first being reserved for the author and date. Although I've tried using different CSS combinations like h1 + p::first-letter {}, it only affects the first para ...

css

Arranging Elements Using CSS

Currently, I am working on aligning and positioning my items using CSS. However, I'm a bit confused about the right approach. Here is a demo of my current progress: Demo Link I aim to achieve a layout similar to this sketch: Sketch Image Apologies ...

jqueryhtmlcss

Exploring Alternatives to Hidden Fields in HTML

Similar Inquiry: Alternatives to Hidden Field in HTML Currently, I am utilizing a hidden field to conceal certain information on emails that are deemed confidential. Despite successfully extracting the hidden fields using Java, I encounter an issue wh ...

htmloutlook

Apply CSS styling to the v-html output

I am trying to enhance the style of HTML code using a v-html but have been struggling with finding a working solution so far. Can anyone help me out? :( Below is my code snippet: Template : <div class="para" v-html="value" /> Script : exp ...

htmlcssvue.jssassvuejs2

Is there a way to retrieve all "a" tags with an "href" attribute that contains the term "youtube"?

My goal is to capture all a tags that have the href attribute containing the word youtube. This task requires the use of jquery. ...

javascriptjqueryhtmlcssjquery-selectors

Only consider valid values for input and ignore any zeros

I am working on a form where I need to accept any number, regardless of if it's negative, a float, or a long integer. I have implemented code to not allow null, undefined, or empty values, but I encountered an issue where entering 0 is being read as e ...

javascripthtmlgetelementbyid

Using PHP/MySQL to enable users to make changes to their account details

I've successfully set up 2 pages update.php edit.php We begin on edit.php, so here is the script for edit.php <?php session_start(); $id = $_SESSION["id"]; $username = $_POST["username"]; $fname = $_POST["fname"]; $password = $_POST["password"]; ...

phphtmlmysqldatabasephpmyadmin

Efficiently update a multi-step form using Ajax and jQuery by adding new content without needing to reload the

Is it possible to create a multistep form on a single page without reloading the div with content from a PHP file, but instead appending it below? Here is my current progress: $(document).on('submit', '#reg-form', function(){ var ln = ...

javascriptjqueryhtmlajaxsubmit

When hovering over slick text, it becomes hidden because of non-responsive CSS. Are there any solutions to make it responsive?

I can't seem to get the on-hover dates to appear, even though they are rendered when inspecting the page. I suspect it could be related to a responsive CSS issue or class breaking. How can I resolve this? https://i.stack.imgur.com/jyEJb.png https:// ...

javascriptphphtmlcss

The xpath identifier in Selenium Python 2.7 for Chrome is dynamically changing with each instance

I have encountered another issue. I previously asked a similar question and tried the suggested method, but it did not work for this specific problem. The HTML code for this element is related to Filters. The main issue is that there is a toggle button th ...

pythoncssseleniumselenium-webdriverui-automation

Maintain the div's aspect ratio by adjusting its width according to its height

I am seeking a way to maintain the width of the .center div in relation to its height, following a 4:3 aspect ratio (4 units wide for every 3 units high). The height of the div should be set to 100%, and I also need to align the div horizontally at the cen ...

csshtmlheightwidth

What is the process for incorporating the !important declaration into a CSS-in-JS (JSS) class attribute?

I'm currently exploring the use of CSS-in-JS classes from this specific response in conjunction with a Material UI component within my React project. In order to override the CSS set by Bootstrap, I've decided to utilize the !important modifier. ...

javascripthtmlcssreactjsmaterial-ui

Add a circular transition effect to Font Awesome icons

Check out my code snippet on JSFIDDLE: https://jsfiddle.net/8f3vLh0a/14/ I am using font awesome icons and I would like to add a circling effect on hover similar to this demo: http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/ How can I implement t ...

htmlcss

Ensuring Consistent HTML5 Page Layout Across Various Browsers Using CSS

Hey everyone, I recently created an HTML5 page and utilized the <section> tag. However, I'm encountering issues with the CSS file I'm using. It seems to work perfectly on Firefox, but the layout is all over the place when viewed on Chrome a ...

csshtml

Adjust top position dynamically during resizing

When resizing the window, I am facing an issue with the image going outside of the box. I believe adjusting the position top of the image based on the box height might help in fitting the image properly within the box. $(window).resize(function() { va ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Customize the overlay color using the theme's background color

I want to create an overlay on my webpage that covers all the content. However, I'm facing a challenge because my website allows users to customize the theme colors, and the overlay div does not adopt these color changes automatically. To rectify this ...

htmlcss