Displaying an inline block-CodePudding

I'm building a site and I've encountered a problem that an inline block doesn't work for me, I'm trying to add an inline block to the <section id="section-three"> section, but it doesn't work, I tried to add it to specific divs, but it also doesn't work, how can I fix it? I don't need to use flex, I need to use the inline block. I would like it to be like this https://prnt.sc/V14eLuOjtX2k

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;
  color: #926239;
  line-height: 1.6;
}

#header {
  background-image: url("http://traversymedia.com/downloads/assets/beachshowcase.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

h1 {
  font-size: 50px;
  line-height: 1.2;
}

#text {
  margin: 5px;
  font-size: 20px;
}

.button {
  font-size: 18px;
  text-decoration: none;
  color: #926239;
  border: #926239 1px solid;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.button:hover {
  background-color: #926239;
  color: white;
}

#section-three {
  display: inline-block;
}

.block {
  background: #926239;
  color: white;
  padding: 20px;
}

#block-two {
  padding: 20px;
}

#block-three {
  background: #926239;
  color: #fff;
  padding: 20px;
}

<header id="header">
  <h1>Welcome To The Beach</h1>
  <p id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi officiis ipsum officia numquam expedita ullam.
  </p>
  <a href="#" >Read More</a>
</header>

<section id="section-three">
  <div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
  <div id="block-two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
  <div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
</section>

CodePudding user response：

You are applying display:inline-block to the container/parent (#section-three), but you should apply it to its children instead (and add a width setting!). Replace your #section-three {...} rule with

#section-three > * {
  display: inline-block;
  width: 32.66%;
  box-sizing: border-box;
}

BTW: Still, using display:flex would be better since finding an appropriate width setting for the inline-blocks is difficult here.

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;
  color: #926239;
  line-height: 1.6;
}

#header {
  background-image: url("http://traversymedia.com/downloads/assets/beachshowcase.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

h1 {
  font-size: 50px;
  line-height: 1.2;
}

#text {
  margin: 5px;
  font-size: 20px;
}

.button {
  font-size: 18px;
  text-decoration: none;
  color: #926239;
  border: #926239 1px solid;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.button:hover {
  background-color: #926239;
  color: white;
}

#section-three > * {
  display: inline-block;
  width: 32.66%;
  box-sizing: border-box;
}

.block {
  background: #926239;
  color: white;
  padding: 20px;
}

#block-two {
  padding: 20px;
}

#block-three {
  background: #926239;
  color: #fff;
  padding: 20px;
}

<header id="header">
  <h1>Welcome To The Beach</h1>
  <p id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi officiis ipsum officia numquam expedita ullam.
  </p>
  <a href="#" >Read More</a>
</header>

<section id="section-three">
  <div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
  <div id="block-two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
  <div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
</section>

CodePudding user response：

You should definitely just use flexbox. Browser support is wide. Inline block solution is also included below if you really want to use that.

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;
  color: #926239;
  line-height: 1.6;
}

#header {
  background-image: url("http://traversymedia.com/downloads/assets/beachshowcase.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

h1 {
  font-size: 50px;
  line-height: 1.2;
}

#text {
  margin: 5px;
  font-size: 20px;
}

.button {
  font-size: 18px;
  text-decoration: none;
  color: #926239;
  border: #926239 1px solid;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.button:hover {
  background-color: #926239;
  color: white;
}

#section-three {
  display: flex;
}

.block {
  background: #926239;
  color: white;
  padding: 20px;
}

#block-two {
  padding: 20px;
}

#block-three {
  background: #926239;
  color: #fff;
  padding: 20px;
}

<header id="header">
  <h1>Welcome To The Beach</h1>
  <p id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi officiis ipsum officia numquam expedita ullam.
  </p>
  <a href="#" >Read More</a>
</header>

<section id="section-three">
  <div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
  <div id="block-two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
  <div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
</section>

If you really want to use inline block for some reason you need to remove the whitespace from your HTML, add a width to your child divs and set them to box-sizing: border-box to work more easily with the padding you have added to them.

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;
  color: #926239;
  line-height: 1.6;
}

#header {
  background-image: url("http://traversymedia.com/downloads/assets/beachshowcase.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

h1 {
  font-size: 50px;
  line-height: 1.2;
}

#text {
  margin: 5px;
  font-size: 20px;
}

.button {
  font-size: 18px;
  text-decoration: none;
  color: #926239;
  border: #926239 1px solid;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.button:hover {
  background-color: #926239;
  color: white;
}

#section-three > div{
  display: inline-block;
  width: 33.333%;
  box-sizing: border-box;
}

.block {
  background: #926239;
  color: white;
  padding: 20px;
}

#block-two {
  padding: 20px;
}

#block-three {
  background: #926239;
  color: #fff;
  padding: 20px;
}

<header id="header">
  <h1>Welcome To The Beach</h1>
  <p id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi officiis ipsum officia numquam expedita ullam.
  </p>
  <a href="#" >Read More</a>
</header>

<section id="section-three">
  <div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div><div id="block-two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div><div >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
</section>