Recently I found out about a site called Front-end Mentor. I've started finally learning front-end technologies in depth lately but I found that while HTML feels relatively straightforward, CSS seems a lot more difficult to code in because of the planning. This is the first project I've tackled from their site and it tasked me with creating a simple QR code webpage. One of the major things I struggled with on this project was the use of the box model to properly organize my elements on screen.

.main-container {     margin-left: auto;     margin-right: auto;     margin-top: 100px;     border-radius: 5%;     padding-bottom: 2.5em;     width: 100%;     max-width: 360px;     background-color: hsl(0, 0%, 100%);     display: flex;     flex-direction: column; } 

While I previously had tried to manually set my margins, it felt like no matter what I'd made my margins there was no change. Eventually I learned that I needed to keep my left and right margins set to auto.

I also couldn't seem to get the included font family from google to display, so I was forced to use the fallback font. I linked my font within my html like so:

  <link rel="stylesheet" href="styles.css">   <link rel="stylesheet" href="https://fonts.google.com/specimen/Outfit"> 

Then I also set the font family to Outfit in my css as shown:

h1 {     font-family: 'Outfit', sans-serif;     text-align: center;     color: hsl(218, 44%, 22%);     font-weight: 700;     font-size: x-large;     padding-left: 30px;     padding-right: 30px;     margin-top: 15px;     margin-bottom: 0px; }  p {     font-family: 'Outfit', sans-serif;     text-align: center;     color: hsl(220, 15%, 55%);     font-weight: 400;     padding-top: 0px;     padding-left: 40px;     padding-right: 40px;  } 

In the future I would like to get better at planning out in advance how I'll organize my elements and I'd like to better understand how to get the most out of using flexbox. I also think that I still could use some more work on understanding how to effectively use the box model.