Hi there. I am very new to coding and I am working on my tribute page. I feel like it’s a little messy right now and I’m having trouble getting my paragraphs under the image to center. Based on various google searches I’m guessing that it’s my Bootstrap overriding what I’m trying to do or just the fact that I’m a complete newbie and don’t fully understand what I’ve done, ha! I would love any help anyone is able to give. I’ll put the HTML, CSS and an image below. Thank you!
HTML
<head>
<link href="https://fonts.googleapis.com/css?family=Bellefair|Pacifico" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div id="container-fluid">
<div class="container">
<div class="image">
<!--there's a picture of my dog here, but I can't include it because I'm only allowed to include one image in this post-->
<caption><h1>Gemma & Pixie Project</h1></caption>
</div> <!--end of div image-->
</div> <!--end of div container-->
<div id"main">
<div class="row">
<div class="gemma col-xs-6">
<h3>Gemma</h3>
<p>Gemma was adopted from Pixie Project, a not for profit rescue in Portland Oregon.</p>
<ul>
<li>Age: Two and a half years old.</li>
<li>Weight: 18 lbs, after the Vet called her a <q>tube</q> and put her on a doggie diet.</li>
<li>Favorite food: Anything. Literally anything. We caught her eating pieces of the doorstop off the carpet last night.</li>
<li>Best friend: Mr. Cronos, the dog who lives next door.</li>
</ul>
</div><!--end of div Gemma-->
<div class="pixie col-xs-6 right-well">
<h3>Pixie Project</h3>
<p>
Pixie Project takes in animals from nearby, overcrowded shelters in rural areas of Portland and from other states as well. Pixie offers <q> pet adoption services, pet owner education and support and low cost and free spay and neuter and veterinary services for homeless and low-income pet owners.</q> When you adopt an animal through Pixie Project there is a two week trial period, which gives you time to make sure that your new fuzzy friend is a good fit for your home... and that you are a good fit for them!
</p>
</div><!--end of div pixie-->
</div><!--end of div row-->
</div><!--end of div id=main-->
<p class="clickme">Click <a href="http://www.pixieproject.org/" target="_blank">here</a> to read more about the Pixie Project.</p>
</div><!--end of div container-fluid-->
</body>
CSS
body {margin: 0; padding: 0;}
.main {margin-left: auto; margin-right: auto;}
.row {margin-left: auto; margin-right: auto;}
#container-fluid {position: responsive; width: 100%;}
.container {background-color: pink; width: 100%; margin-top:30px; margin-bottom: 50px;}
.gemmapic {width: 50%; border-radius: 4%; margin-top:10px;}
.gemma, .pixie {background-color: pink; padding: 20px; max-width: 48%; }
h1, h3 {font-family: 'Pacifico', cursive !important;}
p, ul {font-family: 'Bellefair', serif; font-size: 1.2em; margin: 20px;}
li {align: left;}
ul {list-style: none;}
.clickme {display: block; text-align: center; margin-top: 10px; font-size: 1.5em}
IMAGE (hopefully… I’ve never tried to post an image to a forum before, so this may be another thing I’m trying to learn.)