.navtext {
  color: rgb(236, 234, 234);
  margin: auto;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.navbutton {
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer
}

.navbutton:hover {
  background-color: #ffffff;
  color: black;
  transition: 0.3s;
}

<div >
  <img  src="images/navphoto.jpg">
  <div >
    <h2 >Check out the newest collection of clothes</h2>
    <p >High quality, fashionable clothes for all year around for men and women.</p>
    <button >Check it out</button>
  </div>
</div>

So I want to move the high quality <p> from the middle closer to check out <h2>. How do I do that? I wanted to separate text from button with a div inside .nav div but it's not working because it's still not separated.

CodePudding user response：

You can use margin-top on .pnavtext so it will move upward and also remove gap from .navtext. Look the following code:

.navtext {
  background-color: black;
  color: rgb(236, 234, 234);
  margin: auto;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  align-items: center;
  padding: 30px 0px;
}

.pnavtext {
  margin-top: -10px;
}

.navbutton {
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer
}

.navbutton:hover {
  background-color: #ffffff;
  color: black;
  transition: 0.3s;
}

<div >
  <img  src="images/navphoto.jpg">
  <div >
    <h2 >Check out the newest collection of clothes</h2>
    <p >High quality, fashionable clothes for all year around for men and women.</p>
    <button >Check it out</button>
  </div>
</div>

CodePudding user response：

Removing the gap: 20px; on .navtext should give you the desired result.

.navtext {
  background-color: black;
  color: rgb(236, 234, 234);
  margin: auto;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
}

.navbutton {
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer
}

.navbutton:hover {
  background-color: #ffffff;
  color: black;
  transition: 0.3s;
}

<div >
  <img  src="images/navphoto.jpg">
  <div >
    <h2 >Check out the newest collection of clothes</h2>
    <p >High quality, fashionable clothes for all year around for men and women.</p>
    <button >Check it out</button>
  </div>
</div>

CodePudding user response：

Minimum two easy ways to do that:

1. Reduce gap propertey from gap: 20px; to maybe 10px;
2. Add margin-top: -20px; to your .navbutton class. See example below:

.navtext {
  color: rgb(236, 234, 234);
  margin: auto;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.navbutton {
  margin-top: -20px;
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer
}

.navbutton:hover {
  background-color: #ffffff;
  color: black;
  transition: 0.3s;
}

<div >
  <img  src="https://...">
  <div >
    <h2 >Check out the newest collection of clothes</h2>
    <p >High quality, fashionable clothes for all year around for men and women.</p>
    <button >Check it out</button>
  </div>
</div>