Assistance with CSS Alignment

HTML-CSS
1

Hi guys,

Trust all is well with you.

I’m gonna need you guys to check my entire code.

Everything seems alright.

I’m just now stuck on trying to align my last “Subscribe” section to the left, as in for the text inside the box to move to the left. If that makes sense.

Was tempted to post my HTML code as well but do not think it’s necessary but please check out my CSS code, especially the last part.

.header {
width:100%;
height:100%;
background-image: url(/image/header.jpg);
background-size: cover;
border-radius:4px; 
}

#header-img {
  position: relative;
  top: 30px;
}

body {
  background-color: black;
  color: grey;
}

h2 {
  color: white;
}

h2:first-of-type {
  margin-top: 60px;
}


#nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

@media (min-width: 768px) {
#nav-bar ul {
display: flex;
justify-content: space-between;
}
}

.product-media {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}

@media (min-width: 768px) {
.product-media {
flex-direction: row;
}

.subscribe-box {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  color: black;
  font-size: 16px;
  line-height: 1.2;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

Link to the challenge:

https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page

:pray:t6:

3

You’re just always here and we are all so lucky.

Thank you but was able to find a way using the “Justify-Content” element and it worked.

You’re awesome :100: :100: :100:

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.