Trouble with margins

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!


<link href="|Pacifico" rel="stylesheet">

<link rel="stylesheet" href="//"/>

<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">
<p>Gemma was adopted from Pixie Project, a not for profit rescue in Portland Oregon.</p>

  <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>
</div><!--end of div Gemma-->

<div class="pixie col-xs-6 right-well">
  <h3>Pixie Project</h3>
    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!
</div><!--end of div pixie-->
  </div><!--end of div row-->
  </div><!--end of div id=main-->

<p class="clickme">Click <a href="" target="_blank">here</a> to read more about the Pixie Project.</p>
</div><!--end of div container-fluid-->


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.)

Can you explain what the question is?
It is better if you use codepen to share your code if you want help.

Hi JohnnyB,

Can you explain how I can use codepen to share my code. Do I use the “share” button on there? That may seem like a stupid question, but I was concerned that if I hit “share” it would post my project as completed or something. I’m new to codepen and new to coding, so even though it might seem obvious to someone who knows codepen, it’s not necessarily to me :slight_smile:

The question is, how can I add margin-left to my div id=“main” which is the parent tag for my paragraph about Gemma and Pixie Project. There’s no margin on the left-hand side and no matter what I do, I can’t seem to add any left-hand margin and I’m wondering what’s preventing that. Thanks for any help you can provide.


He meant copy and paste the url of the pen and put it in a reply.

FYI - I’ve edited your original post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


1 Like

I removed main and used a container instead:

Note, for main you had a typo in the HTML and you used id in the HTML and a class definition in the CSS.

2nd Note. Click here is not an accessible link so I changed it.
Accessibility and click here

Hi Randelld,

Thank you. I copy pasted, but didn’t do the backticks. Now I know :slight_smile:
Appreciate the help.


Hey JohnnyB,

Thank you so much. I’ll take a close look at everything you changed. I really appreciate the help!!! Also, I am grateful for the link on Accessibility and click here. There are so many things to learn with coding - I definitely feel a little in over my head. Hopefully that will get better with time and practice… Thanks again!


1 Like