It's strange, my custom main.css doesn't seem to have any effect on changing the font size or location of the text. However, as soon as I remove the line that links to bootstrap, it starts working perfectly.
I believe that the bootstrap.css file has predefined styles for the attributes I am trying to modify, so my custom styles in main.css are not taking effect until I remove the
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">My head section looks like this, and I have read that I should include my main.css file after bootstrap for it to work properly`
<title>For Testing Purposes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
Here is the HTML code for the elements I want to customize`
<h1>Space</h1>
<section class="parallax">
<div class="parallax-inner">
<h2>Space</h2>
</div>
</section>
<h1>Space</h1>And this is my main.css file, which only takes effect when the bootstrap link is removed.
.parallax {
background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
background-size: 100% 100%;
}
.parallax-inner {
padding-top: 10%;
padding-bottom: 10%;
text-align: center;
font-size: 575%;
}
.h1 {
font-size: 575%;
}I even tried using !important tags, but it didn't work.