How do align text to where it stays in the same place regardless of screen size?

Question

So I'm a total beginner (2 weeks learning) and I am creating my first website for a FreeCodeCamp project.
I'm trying to set my bullet points to be a certain distance to the right on my screen at all times. I used margin-left: 300px; in my CSS chart but if I minimize my window or go on my phone it throws it all off alignment.
How would I go about making it stay in the same place no matter what size the screen is? https://codepen.io/Carnoux/pen/PQEXoY

.ulStyleCenter {
 display: block;
 color: white;
 margin-left: 300px;
 margin-right: auto;
 list-style-position: inside;

}

Answer 1

I added a wrapper on the body of your content and then replaced

margin-left: 300px;

with margin-left: 2vw;

vw is viewport width, so it proportional to the size of the screen. 2vw means that the margin-left will be 2% of the total viewport.

h1 {
  color: blue;
  font-family: "Allerta Stencil";
  font-weight: bold;
}
h3 {
  color: blue;
  font-family: "Allerta Stencil";
}
h4 {
  color: white;
  font-family: "Allerta Stencil";
  text-align: center;
  font-size: 45px;
}
.bgColor {
  background-color: black;
  background-image: url("https://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
  background-size: cover;
}
.rankScreen {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-style: ridge;
  border-color: #000077;
  border-width: 15px;
  max-width: 100%;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.pStyle {
  color: white;
  background-color: #000055;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 8px;
}

.ulStyleCenter {
  color: white;
  margin-left: 2vw;
  margin-right: auto;
}
.pStyle2 {
  font-size: 30px;
  color: white;
  padding: 50px;
}
.credit {
  display: block;
  background-color: black;
  color: white;
  text-align: center;
  font-size: 15px;
}
@media screen and (max-width: 480px) {
  img {
    width: 400px;
  }
}

.wrapper{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

<link href='https://fonts.googleapis.com/css?family=Allerta Stencil' rel='stylesheet'>
<div class="bgColor">
  <div class="wrapper">
    <h1 class="text-center">-Counter-Strike Global Offensive-</h1>
    <h3 class="text-center"><em>The game that redefined a genre</em></h3>
    <img class="center" src="http://dorkshelf.com/wordpress/wp-content/uploads//2016/03/Counter-Strike-Global-Offensive-large.jpg" alt="CS:GO Banner">
    <p class="pStyle text-center">CS:GO is a first-person shooter created by Valve that pits two teams of five players against eachother</p>
    <br>
      <ul class="ulStyleCenter">
        <li>Released by Valve in 2012</li>
        <li>First-Person Shooter</li>
        <li>Team based 5v5</li>
        <li>20+ maps</li>
        <li>Counter-Terrorists vs. Terrorists</li>
        <li>Round based matches. First team to 16 rounds wins</li>
        <li>Round time limit of 2 minutes</li>
        <li>Terrorists must plant a bomb before time ends or Counter-Terrorist team is eliminated</li>
        <li>Counter-Terrorists must defend bomb from being planted, kill all Terrorists or defuse bomb after it is planted</li>
        <li>Full player ranking system ranging from "Silver 1" to "The Global Elite" -displayed below-</li>
      </ul>
      <br>
      <h4>Ranked Chart</h4>
      <img class="rankScreen" src="https://steamuserimages-a.akamaihd.net/ugc/532871246070774091/31403BEFD00407DF9D16EBDDE500EB7FE32E18B3/" alt="CS:GO Ranked Chart">
      <p class="pStyle2 text-center">You can find more information about the game on their website<a href="http://blog.counter-strike.net/" target="blank">HERE</a>
      </p>
    <br>
    <br>
    <br>
    <p class="credit">Written and Coded by Dalan Ienatsch</p>
  </div>
</div>