Elements are stuck in top left corner React/CSS

Question

I am building a simple react page using create-react-app, and having trouble with the layout. My components are nested in App, which is limited to the top of the page.

Here is an image, showing where the elements are and my component tree:

// App

html, body {
  margin: 0;
  padding:0;
}

//Container

html, body {
    margin:0;
    padding:0;
  }

//Header

.loan-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: white;
    width: 100%;
    border: 0;
    border-radius: 3;
    box-shadow: 0 3px 5px 2px rgba(180, 180, 180, .3);
    color: white;
    height: 60px;
}

//ApplicationContainer

.loan-application-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border: 0;
    border-radius: 3;
    box-shadow: 0 3px 5px 2px rgba(180, 180, 180, .3);
    color: #005350;
    height: 100px;
    width: 75%;
    top: 100px;
}

.applications {
    font-size: 12px;
    padding: 2;
    display: inline-flex;
    align-items: baseline;
    width: 100%;
    height: 50%;
    border: 0.32px;;
    border-radius:3;
    justify-content:space-between;
    font-size: 1vw;
    border-color: black;
}

.view-btn {
    height: 30;
    width: 10%;
    background: #005350;
    font-size: 1vw;
    color: white;
}

p {
    font-family: 'Gill Sans';
    font-weight: bold;
    font-size: 1vw;
    width: 30%;
    color: #005350;
}

https://imgur.com/a/SdRAq21

Answer 1

Your .loan-application-container has a width of 75% . There are multiple ways you can go about this. With flexbox, depending on the flex-direction property, you can either specify in the parent to justify-content: center or align-items: center or in the itself justify-self: center or align-self: center respectivly.

or as a quickfix try left: 0; right: 0; margin: 0 auto; left: 0; right: 0; margin: 0 auto; in .loan-application-container ruleset.