0

When I apply flex to the "main-intro" container, the text and the image do not have equal width. The "main-intro" container also has a width that exceeds the parent container. I'm confused, isn't flexbox supposed to automatically apply equal width to the child elements?

'''

 <body>
    <div class= "container">
      <div class="main-intro">
        <div class="intro">
          <h1>We design and build better chairs, for a better life</h1>
          <p>In a small shop in the heart of Lisbon, we spend our
          days restlessly perfecting the chair. The result is a
        perfect blend of beauty and comfort, that will have a lasting
      impact on your health.
          </p>
          <a href="#">Shop chairs</a>
        </div>
        <img src="hero.jpg">
      </div>

'''

'''

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container{
  width: 960px;
  margin-right: auto;
  margin-left: auto;
}

img{
  width: 100%;
}

.main-intro{
  display: flex;
}

'''

ATLA Fan
  • 29
  • 3

1 Answers1

0

u made the whole page a flex box so the code is correct just add flex where ever u want to add the image..

aryanthakur2004
  • 1
  • 1