Right margin does not work

[BlackWolff]

Hi guys and gals!

I am working on my first bootstrap front end development project on here but I have a bit of an issue that I do not understand. When I set my right margin it dose not follow the command. I know it is something that I just don’t understand yet because I am very new to coding so could someone please help me?

Here is a picture of how it looks:

right margin

And here is my codepen and code:

qYWKrJ

body {border-color: black; border-width: 1px; border-style: solid; margin-left: 200px; margin-right: 200px; } .center {display: block; margin-left: auto; margin-right: auto; width: 50%;} .med-img {width: 800px;} .text {position: relative; left: 100px; right: 100px;} .v-space {position: relative; top: 20px} .indent {position: relative; left: 196px; right: 100px;} .v-space-sm {position: relative; top: 8px} h1 {font-size: 45px};

Star Citizen Historical Timeline

Before Common Era

300,000 BCE The Hadesians have occupied all four planets in their system.

An utterly devastating Civil War between the three inner planets of the Hades System takes place. This likely leads to the extinction of the Hadesian species. Hades IV is cleft in half and Hades I stripped of its atmosphere, the weapons of war at the Hadesians' disposal have left catastrophic destruction right across the system, but it will be a very long time before another living soul sets foot in the Hades system to notice

10,000 BCE Dawn of Human Civilization on Earth

References used on my page

[pedrobslisboa]

This is not the answer, only the code organized.

body {
border-color: black; 
border-width: 1px; 
border-style: solid; 
margin-left: 200px; 
margin-right: 200px; 
} 
.center {display: block; 
margin-left: auto; 
margin-right: auto;
 width: 50%;
} 
.med-img {
width: 800px;
} 
.text {
position: relative; 
left: 100px; 
right: 100px;
} 
.v-space {
position: relative; 
top: 20px
}
 
.indent {
position: relative; 
left: 196px; 
right: 100px;
}
.v-space-sm {
position: relative; 
top: 8px;
} 
h1 {
font-size: 45px
};

Now it’s better hahahha

Can you put your html here too?

I guess your problem is with ‘position’, but it would be better if I could see your entire code.

[owel]

You’ll get more help if you post your codepen.

[BlackWolff]

Sorry! Here’s my codepen https://codepen.io/miklos-haranghy/pen/qYWKrJ

[BlackWolff]

I tried posting the HTML but it just displayed it as it would when the code is executed.

Here is my Codepen: https://codepen.io/miklos-haranghy/pen/qYWKrJ

And thank you for organizing it

[pedrobslisboa]

Ok, I think before to give you an answer it’s better to give you an advice.

You have to study how to organize your HTML, learn the block style: You have to design the entire website with blocks, I like to think that those blocks are transparent with border (you can use this on the css with border: 1px solid red;). So if you have a place that contains a timeline make a container for this timeline. If you have a navbar make a container for this. Do you have buttons on this navbar? Make container for this buttons! Its very nice because you will organize your code and automatically your Cascading Style Sheets (CSS), did you see that CSS is a Cascading Style? If you have a container inside a container, inside to another container, you have a Cascading HTML!! If you have tag after tag without semantic and organization you will always have a problem with CSS.

So, some links:

Float - https://www.w3schools.com/cssref/pr_class_float.asp

About float: Have you ever read a journal before? So you know that some images stay on left and the text goes around like this:

The float was made thinking about this, the image stays on one side and the text goes around it. Because of that, we don’t have float: center, it wouldn’t be nice to read.

Position: https://www.w3schools.com/cssref/pr_class_position.asp

ABout position: Here is a advice, the position isn’t for all the cases! If you understand position you will have a great power in your hands, that you have to use with responsible. But you HAVE TO understand to use, with position we cannot make a mistake.

I’ve made a fork to you see how I did the organization: https://codepen.io/pedrobslisboa/pen/YLKmvL?editors=1000

I’ve left almost everything with border red to you understand better, and it has commented on the html explain what I did and why.

If you have any doubts you can send here, it will be a pleasure to help.

PS: I only have 2 months coding, but I understood at the beginning the importance of organization, I’m not the most organized guy so I’ve been working this a lot. So, do the same, learn good practices and look for understood what you’re using and WHY! When you know why you’re using this and not is because you know about this subject

Hope you understood (I’m Brazilian, so my English is not the best one).

As always, keep coding!

EDIT:

PS2: I didnt answer you about the margin because you have to understood everything what I said, I left comments on the HTML about the margin too.

[Adrianl3d]

It will make life easier if you move all your <style> over to the css section. This helps separate the css from the html and makes it all clearer. You treat the css as a separate style sheet and there is no need to reference it on your html, it already knows.

[BlackWolff]

Thank you very much for your really good explanation and the fork that you created! I am going to take a look at everything and try to learn as much as I can.

PS: I had no trouble understanding your english

[Hassan]

Hey first of all, great effort! As long as you keep trying, you will strive, and one can always learn from their mistakes. I did noticed a few issues in your code, so I thought it would be best to re-write it for you.

First and foremost, try to limit any styling in your HTML. That is what CSS is for. It will do all the required styling. Also, try to reframe from using tags. It is better to use tags and style the text in CSS using font-weight: bold.

Second, try using more div tags to wrap content as a parent container. It is a lot easier to center text, add padding etc etc. Also, it helps create separation in your HTML, making it easier to read. Having a div parent container around content can make it easier to target certain tags. Instead of giving each tag it’s own ID, you can target a certain tag with it’s parent container in CSS. For example:

<div id="main_container">
   <p>Hello World</p>
</div>

#main_container p {
   font-size: 20px;
}

Third, when naming your id and classes, make sure the name signifies what the content is. Also a trick I use is to use _ when separating words in a ID and - for classes, example: id=“hello_world” class=“hello-world”. It will bring in that much more organization, making it easier for you or another developer jumping into your code to work on.

I would suggest taking some basic HTML and CSS course to create a good foundation for you. Below is the revise HTML and CSS for your website:

<!-- HTML -->
<div id="main_container">
  <h1 id="title">Star Citizen Historical Timeline</h1>
  <div id="pic_container">
    <img  id="pic" src="https://www.pcgamesn.com/sites/default/files/virtual%20property%20law%20star%20citizen.png" alt="space man">
  </div>
  <div id="main_content_container">
    <h2>Before Common Era</h2>
    <p><span>300,000 BCE</span> The Hadesians have occupied all four planets in their system.</p>
    <p>An utterly devastating Civil War between the three inner planets of the Hades System takes place. This likely leads to the extinction of the Hadesian species. Hades IV is cleft in half and Hades I stripped of its atmosphere, the weapons of war at the Hadesians' disposal have left catastrophic destruction right across the system, but it will be a very long time before another living soul sets foot in the Hades system to notice</p>
    <p><span>10,000 BCE</span> Dawn of Human Civilization on Earth</p>
  </div>
  <div id="references_container">
    <p><a href="https://starcitizen.tools/Historical_Timeline">References</a> used on my page</p>
  </div>
</div>

html, body {
  margin: 0;
  padding: 0;
}
#main_container {
  margin: 0 200px;
  border: 1px solid #000;
} 
#title {
  font-size: 45px;
  text-align: center;
  font-weight: bold;
}
#pic_container {
  padding: 0 15px;
  margin-bottom: 20px;
}
#pic {
  width: 100%;
}
#main_content_container {
  padding: 0 100px;
}
#references_container {
  text-align: center;
}
span {
  font-weight: bold;
}

Best regards

[BlackWolff]

Thank you so much @Hassan ! That was some really great input.

I was pretty confused about the purpose of divs so this definitely helped a lot.

I am taking the lessons on freecodecamp for HTML and CSS. Do you recommend something else other than these tutorials?

Once again, thank you for your help.

[Hassan]

Udemy has a lot of free course, but if you don’t mind paying a little, teamtreehouse has amazing front end courses, i.e Javascript, CSS3 and HTML5. Your given a month free and $25.00 each consecutive month, but I think it’s worth the cash. A great resource.