Unable to apply a CSS border style to the .col-md-10 class

I can't figure out why there's no border showing up around this section on my webpage.

.col-md-10 {
background-color: red;
border-radius: 25px;
border-color: gold;
border-width: 20px;

}

Even though I've specified the border properties, it still doesn't display. What could be causing this issue? Here's a snippet of the HTML file:

    <!DOCTYPE html>
<html lang ="en-us">
<head>
  <meta charset="UTF-8">
  <title>About Me</title>
  <script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="christmas.css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>

 <script src = "portfolio.js"></script>

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>

    @font-face {
    font-family: Kunstler Script;
    src: url(kunstler.ttf);
}

  #content {
    display: none;
  }

    #time {
      font-weight: bold;
    }

@media only screen and (max-width: 768px) {

  img{
    height: 150px;
  }


  /*Is Google Developer Tools not recognizing my changes?*/
  /*Looks like I have more to learn about responsive design.*/
}
</style>

</head>

<body onload = "showStuff(), startSlideshow(), dateNTime(), holidayCheck(), bunnyHop()">


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Dennis Markham</a>
    </div>
    <ul class="nav navbar-nav">
      <li class = "active"><a href="index.html">About Me</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <a class = "holiday" href = "#" style="float:right;" onclick = "holiday();">Turn on holiday mode?</a>
  </div>
</nav>

<div id = "content">

<div class ="row">
<div class = "col-md-1"></div>
<div class = "col-md-10">
<img id = "me" src = "images/me1.jpg" alt="my face"></img><h1>About Me</h1><p>Good <span id = "time">afternoon</span> 
  (yes, I know what time it is), sir or madam.  My name is Dennis Markham.  I am <span id = "age">28</span> years old, and a recent graduate of the University
  of Texas Austin Coding Bootcamp.  I also graduated with Certificate in Web Development from Norwalk Community College.  
  I recieved a Bachelor of Science Degree in Psychology from the <a href = "https://uconn.edu/">University of Connecticut</a>.  I am currently
  an instructor for <a href = "https://www.codingwithkids.com/#!/"> Coding With Kids</a>.
  I am looking for a job in web development, preferably front end.  I am particularly fluent in HTML, CSS, Javascript, and 
  JQuery, but also have experience in AngularJS, Node.js, Java, AJAX, SQL, PHP, ES5, ES6, Mongo, Mongoose, and React, as well as substantial 
  experience with softwares/websites such as Sublime, Netbeans, GitBash, GitHub, and SQL Workbench.</p> 
  <p>Signed,</p>
<span style = "font-family: French Script MT; font-size: 3em;">Dennis E. Markham</span> 
</div>
<div class = "col-md-1"></div>
</div>

Answer №1

UPDATE: The border-style property was missing, so to correct this issue you can either do the following:

.col-md-10 {
background-color: red;
border-radius: 25px;
border-color: gold;
border-width: 20px;
border-style: solid;
}

or

.col-md-10 {
border: 20px solid gold;

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

How can we determine when a row has been modified while using a list of floating-left LIs?

Check out this list of products for an example: I have a function that is triggered on document ready which goes through each item in the list and adjusts the height of a span wrapping the image to ensure uniform spacing. My question is, is it possible f ...

Ensure that the div spans the entire width of the page, prioritize maintaining the aspect ratio, but allow for variable

I have a dilemma with a div containing multiple elements. My goal is to make the div 100% in width, while also attempting to preserve the aspect ratio if feasible. Should the enclosed elements exceed the div's boundaries, then the height will adjust a ...

What could be causing one of my images to not appear on my Gatsby page?

Hey there, I could use some help with this issue: Recently, I created a website using Gatsby.js and deployed it to my web server (which is running NGINX on Ubuntu 20.04). The site uses Gatsby Image for querying and displaying images, and everything seems t ...

When I zoom in, my h1 tags shift to the right

I am relatively new to this and I am puzzled as to why the text inside my h1 tag seems to shift to the right when I zoom in. Below is the CSS code: h1 { font-family: 'Raleway', sans-serif; border-bottom: 1px solid black; border-top: ...

How to shift an image to the right side of the navbar

Is it possible to change the position of an image within a navbar from left to right? I have tried using the float property but it doesn't seem to work. .logo-img{ float: right; margin: 0px 15px 15px 0px; } <a class="navbar-brand logo-img" ...

Utilizing float positioning in Responsive Web Design

Attempting to implement a two-column float CSS layout with specific width percentages. My CSS styles for the two columns are as follows: .div1 { width: 25%; float: left; } .div2 { width: 75%; float: right; } .container { width: 960px; } @media scr ...

Issue with displaying V-For elements in Bootstrap Dropdown Button

Take a look at my Vue.js (3) component, styled with Bootstrap (5): <template> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle btn-link text-decoration-none text-dark" type="button" ...

Using jquery for form validation along with datalist functionality

I am facing a similar issue as discussed in this post: Validation with datalist However, the solution provided by FelDev is in JavaScript and I require it in jQuery. Since I am new to jQuery, any assistance would be greatly appreciated. Below is FelDev&a ...

Guide on registering/loading a CSS style file in a WordPress child theme

I have a problem with the code I'm using as it's not updating the appearance of the login page... function custom_login_stylesheet() { wp_register_style('custom-login', get_template_directory_uri().'/css/login-style.css' ...

Adjustable width for flexbox column

Is there a way to adjust the width of the first flex column so that it only takes up the space of its content? .flex { display: flex; } .inside { flex: 1; border: 1px solid #000; } <div class="flex"> <div class="inside inside-left"& ...

Reduce the spacing between div elements to eliminate any gap between the rows

I'm trying to keep the divs close together, but the second row isn't lining up properly and the divs don't have any margin. My CSS for the div is as follows: .post { box-sizing: border-box; display: block; float: left; font ...

Troubleshooting iFrame Loading Issues with HTML5 PostMessage

Our code is utilizing the newest postMessage feature in HTML 5 to address cross-domain communication challenges. The issue I am facing is figuring out how to determine if the messages posted to an iFrame have been successfully loaded. If the frame fails to ...

showing text from chosen selection with an additional element included in the output

I could use some assistance with this code snippet. My goal is to showcase the options in the format: "Fried Rice = 10.000" as the outcome. However, the issue I am facing is that the select option box also contains the price. What I actually need is for th ...

Showing identification on the drop-down list

Within my dropdown menu setup, I am aiming to achieve a specific functionality. When the user clicks on sub menu, I want the title of sub menu to display in the Menu space as illustrated below. What steps can be taken to accomplish this? UPDATE: After fu ...

Achieve vertical alignment of a div alongside an image without utilizing tables or flexbox

As a beginner, I know this question has been asked numerous times, but I am struggling to find a straightforward answer that makes sense to me. I prefer not to use tables or flexbox, just plain CSS. What I Need: I have an image and I want to vertically c ...

Placing a div directly beneath an anchor tag

I'm trying to create a dropdown menu that appears directly under the URL that triggers it. I have successfully made the menu appear, but I am struggling with positioning it correctly. Here is my HTML code: <div id="container"> Content here ...

Utilize Jquery for Parsing a Json Document

I am currently facing challenges parsing a JSON file into my HTML page. Below is the structure of my JSON file: { "menu":[ { "id":"contact", "leaf":true, "description":"testing", "link":"", "content":" ...

The Chocolat.js Lightbox plugin is experiencing issues with jQuery as it is unable to detect the

I am in the process of integrating chocolat.js into a basic website. An issue I encountered was that the thumbnail was directly processing the anchor link, which resulted in the image opening in a new window instead of launching it in a modal on the screen ...

Ensure one div scrolls independently while the other remains fixed using Bootstrap

I am currently in the process of constructing a web page with Bootstrap 4. The layout consists of two columns, each contained within individual divs. My requirement is for the content on the right side to be scrollable while the content on the left remains ...

What is the best way to have text, backgrounds, and more change colors continuously in a loop

Suppose I am looking to create a background that alternates between black and blue. Using the following code: <head> <style> body {background:skyblue;} </style> </head> <body> code & ...