SuperUSer SuperUSer - 26 days ago 10
CSS Question

CSS style only works on elements not with selectors

I can't get my css to run on my page.
Here is my html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>shubbler.xyz</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="font-family: 'VT323', monospace; font-size: 20px" href="/">Shubbler.xyz</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/repost/">Repost</a></li>
<li><a href="/search/postsearch">Post Search</a></li>
<li><a href="/search/itemsearch">Item Search</a></li>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li style="font-family: 'VT323', monospace; font-size: 30px"><a href="/donate">Donations</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<div class="container">
<a href="/repost/">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="main-div" style="background-color:lightsalmon;">
<h2><span class="">Repost</span> for /r/GlobalOffensiveTrade</h2>
<br>
<p>Basically, this will repost your latest Reddit Trade.</p>
<p>Sign in with Reddit and confirm the Trade/Store that you want to repost.</p>
</div>
</div>
</div>
</a>
<a href="/search/postsearch">
<div class="row main-div">
<div class="col-md-12 col-xs-12">
<div style="background-color:lightblue;">
<h2>Post Search for /r/GlobalOffensiveTrade</h2>
<br>
<p>This feature will allow you to find posts by filtering either have or want.</p>
<p>Just search for a post below, check out the items in the post too.</p>
</div>
</div>
</div>
</a>
<a href="/search/itemsearch">
<div class="row main-div">
<div class="col-md-12 col-xs-12">
<div style="background-color:lightgreen;">
<h2>Item Search for /r/GlobalOffensiveTrade</h2>
<br>
<p>This feature will allow you to find items posted on /r/GlobalOffensiveTrade.</p>
<p>Just search for an item below, feel free to change float criteria too.</p>
</div>
</div>
</div>
</a>
</div>
</div>
</body>
</html>


Here is my css:

.main-row {
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
border: 4px solid #ff03ff;
background-color:lightsalmon;
}

#div {
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
border: 4px solid #ff03ff;
background-color:lightsalmon;
}


The problem is that it only works when I use tags as selector, for example if I set all divs or the body, like this:

div {
background-color: red;
}


But if I use a selector for a class or id, it doesn't work. I already checked with the w3schools validator, and it returns no notices or errors.

Answer Source

In your html there is no element which has the class main-row, nor the id div, as you have put in the css code.