Displaying an inline block - html

Question

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>
Read More
</header>
<section id="section-three">
<div class="block">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 class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
</section>

Answer 1

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>
Read More
</header>
<section id="section-three">
<div class="block">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 class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
</section>

Answer 2

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>
Read More
</header>
<section id="section-three">
<div class="block">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 class="block">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>
Read More
</header>
<section id="section-three">
<div class="block">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 class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</div>
</section>