Internal styles are effective, while external styles seem to be less efficient

For some reason, internal CSS is working fine, but external CSS just won't cooperate. I even tried using the code !important, but it's like it doesn't understand. I'm trying to incorporate a gallery into my website, but I've hit a roadblock. It seems that there's some mysterious margin being applied from somewhere in the external CSS that overrides everything I do in the HTML code. It's baffling because I haven't specified any margins myself. The only explanation I can come up with is that Bootstrap might be interfering somehow.

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    width: 180px;
    position: static;
}
      
div.gallery:hover {
    border: 1px solid #777;
}
      
div.gallery img {
    width: 100%;
    height: auto;
}
      
div.desc {
    padding: 15px;
    text-align: center;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

   <div class="gallery">
       <a target="_blank" href="gtrr35.jpg">
          <img src="gtrr35.jpg" alt="Nissan GT-R R35 Nismo">
       </a>
       <div class="desc">Nissan GT-R R35 Nismo</div>        
   </div>

Answer №1

Can you tell me the location of your unique CSS stylesheet link? Make sure it is placed as the final element amongst all other tags (going from top-left to bottom-right) to prevent it from being overridden by the cascading nature of CSS...

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

Want to know how to get images to show up when sharing a link on Twitter?

For illustration purposes, I am using a CNN article page: The HTML head section of the webpage contains the following tag: <meta name="twitter:image" content="http://i2.cdn.turner.com/money/dam/assets/150114084151-inside-tracker-120x90.png"> Howe ...

Firebug mistakenly detects phantom errors

<div id="video-player" data-src="http://www.youtube.com/embed..."></div> Inspect Element - Browser Developer Tools: Error: Access to property 'toString' denied I scanned the entire page (Ctrl+F) and could not find any reference t ...

integrating live html content into dompdf with php

Hey there, I'm currently working on a script that dynamically loads HTML using the file_get_contents function and then generates and saves the PDF on the server. However, I'm running into a problem where my PHP file is throwing a 500 internal ser ...

display a new feature immediately upon the user's login

I encountered a scenario where the user is supposed to log in, and upon successful login, another component should be displayed. However, this functionality is not working as expected for me. I have to click the login button again or refresh the page to vi ...

Is it possible for the *ngIf directive to stop unauthorized users from accessing my admin page through their browsers?

When the *ngIf directive is set to false, a certain element or component will not be included in the DOM. For example, let's say there is a component that displays admin tools and should only be accessible to authorized users (administrators). Will se ...

Tips for scaling and compressing a canvas image using only pure javascript and HTML5 techniques

I am currently working on resizing and rotating a camera picture on the client side without using any special libraries. I have successfully completed most of the task, but I encounter an offset of 320 pixels when rotating the image. The source of this off ...

Tips for managing callbacks from a RESTful service API on IOS

Utilizing an API to enable users to register an account on my application. Currently, I have managed to craft the necessary URL in objective-C to submit the data, with the API documentation detailing the return codes that will indicate the outcome. My qu ...

When making an API request, the response includes the body of the data, however, the specific properties cannot be

I've encountered an unusual bug while using the Mapbox geocoding API. const geocode = async (address, callback) => { const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${address}.json?access_token=token&limit=1` try { ...

Understanding the extent of testing coverage in a project using karma and webpack

For my project, I am incorporating ES6 syntax and testing my code with Karma. While I have successfully set up testing, I encountered an issue with the coverage report. Instead of including the source code, the coverage report is highlighting spec file ...

What is the correct way to horizontally center a Material icon within a div?

How do I correctly center a Material Design icon within a div to fix the gap issue? I have tried using text-align on the items div, but it hasn't worked. (Refer to screenshots for clarification) https://i.sstatic.net/eHuiR.png https://i.sstatic.net/nL ...

Tips for resolving conflicts with jQuery on an ASP.NET webpage

On this page, I am using references and scripts for a date time picker and color box. However, only one of them works at a time - commenting out one script allows the other to work. I have tried using jQuery noconflict, but it did not resolve the issue. H ...

Can a snapshot be taken of an auto-generated ID document in FireStore?

Currently, I am working on developing both a mobile app and web app for my Final Year Project. As someone relatively new to Firestore, I am using a single instance of it to store data. When a customer registers through the mobile app, their information ge ...

Tips for assigning a value in a dropdown menu with AngularJS

Can someone help me with setting the same value in multiple drop-down lists using angular.js? Below is an explanation of my code. <table class="table table-bordered table-striped table-hover" id="dataTable"> <tr> <td width="100" align ...

Using AngularJS to automatically include predefined data in an $http request

I am looking for a way to include a default data attribute in an http request. I came up with the following code: var app = angular.module('dumbhttp', []); app.service('dumbhttp', function ($http, $location) { this.post = function ...

Loading React router on every route page

<BrowserRouter> <div> <Route path={"/"} component={Home} /> <Route path={"/component"} component={AnotherComp} /> <Route path={"*"} component={NotFound} /> </div> </ ...

What is the best way to switch between List and Grid view while automatically updating the image displayed?

**#Unique Component Implementation** import React from 'react'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; import { makeStyles } from &apo ...

How to locate the duplicate elements within an array using JavaScript

There are two different sets of numbers Numbers1=[ 0, 1, 2, 0, 2 ]; Numbers2=[ 0, 0, 1, 2, 2 ]; The goal is to determine the index of each element in Numbers2 from Numbers1 and create a new array like [0,3,1,2,4]; If you would like to see the code I wr ...

Maintain the initial value using ko.mapping.fromJS

How can I prevent new data fetched from an AJAX call using ko.mapping.fromJS from replacing the existing data in my observableArray? I want to append the new data without losing the previous entries. function ViewModel() { var self = this; self. ...

how can I transfer model values to a dashboard in Rails 5?

I have developed an app that includes an adminlte dashboard. The dashboard is populated with various values obtained by a jQuery file. I am trying to pass module values to the dashboard. For example, the number of users shown in the dashboard should be fet ...

Leveraging HTML5 as a standalone application with Deskshell integration for seamless connectivity to MySQL

Currently working on a compact HTML5 application with deskshell. I am seeking a way to connect JavaScript directly to a MySQL database without relying on PHP or any server-side language. Any suggestions? ...