Elements are stuck in top left corner React/CSS

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

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; in .loan-application-container ruleset.

Leave a Reply

Your email address will not be published. Required fields are marked *