HTML5/CSS: Fix position of elements regardless of webpage size

I must say the question is not 100% clear, but if keeping the 'wrapper' div centered on your screen is what you are after, you should also define the (max) width of your 'wrapper' div.

Add this rule to your css:

#wrapper {
   max-width: 1600px; // a maximum width that should apply to the centered element
   margin:0 auto; // always keep this element horizontally centered.
}

Now, your 'wrapper' div should be centered regardless of screensize, with a maximum width of 1600px.

If you also wish to vertically keep the elements on screen, you should add a position:relative property to the header element , and change your margin-left and margin-top properties on .name and .major to left and right and adjust the values slightly.

Please see this fiddle

Note that you should change some other rules, since you applied background color to the wrapper div. You can fix this by adding the background color to the body element, or wrapping the div again for instance.

I think what you want is a somewhat responsive Design, so the content kinda keeps its position with changing screen sizes. I recommend using CSS Flex-Box for this. First of all, here is a fantastic tutorial / Insight for that: Tutorial for CSS Flexbox

Okay, and here is my way of solving your problem:

HTML: (unchanged)

        <div id="wrapper">
    <header>   
        <div class="row">
            <div class="logo">
                <img src="uw_logo.png">
            </div>
            <ul class="main-nav">
                <li class="active"> <a href=""> MAIN </a> </li>
                <li> <a href=""> PROFILE </a> </li>
                <li> <a href=""> INTERESTS </a> </li>
                <li> <a href=""> PROJECTS </a> </li>
                <li> <a href=""> HOBBIES </a> </li>
                <li> <a href=""> CONTACT </a> </li>
            </ul>
        </div>

        <div class ="name">
        <h1>My Name.</h1>
            <!-- <div class="button">
                <a href="" class="btn btn-one"> Watch Video. </a>
                <a href="" class="btn btn-two"> Explore.</a>
            </div> -->
        </div>
        <div class="major">
        <h2>Astrophysics Student.</h2>
        </div>
    </header>
    </div>

CSS:

*

{
    margin: 0;
    padding: 0;
}

@keyframes fadeIn
{
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
}

header /* Linear Gradient makes background darker:  */
{
    display: flex;/* makes header a css Flex container*/
    flex-direction: column; /* defines that your elements are below each other*/
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(spaceship.png);
    height: 100vh;
    background-size: 100% 100%;
    background-position: center;
}
.row{
    display: flex;/* makes row a CSS Flex-container*/
    flex-direction: row; /*this makes a real row out of your container*/
    justify-content: space-between; /* this makes your navbar position on the right*/
    order: -1;/* this positions your Navbar at the top*/
}
.main-nav /* Place menu bars on right side, take out bullets, space from top */
{
    list-style: none;
    margin-top: 2%;
    margin-right: 1%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

.main-nav li /* Place menu bars in a horizontal line */
{
    display: inline-block;
}

.main-nav li a{ /* Change text style of menu bars */
    color: white;
    text-decoration: none;
    padding: 2px 2px;
    font-family: "Impact", sans-serif;
    font-size: 100%;
}

.main-nav li.active a
{
    border: 2px solid white;
}

.main-nav li a:hover
{
    border: 2px solid white;
}

.logo img
{
    height: auto;
    width: 300px;
    float: left;
    margin-top: -0.5%;
    margin-left: -1%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
} 

body
{
    font-family: monospace;
}

.name 
{
    margin-top: 30%;
    margin-left: 62.5%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

h1
{
    color: white;
    font-size: 300%;
    font-family: "Palatino Linotype";
}

.major
{
    order: -1; /*this positions your major above the name (like it was in your code 
     example), even tho the order is different in HTMl (works only inside of Flexbox- 
    Elements (header in this case)*/
    width: 40%;
    margin-left: 17%;
    margin-top: 18%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

h2
{
    color: white;
    font-size: 300%;
    font-family: "Palatino Linotype";
}

Please check out the Tutorial or other tutorials so you understand whats going on here