Images with text not getting aligned side by side - html

Question

I want these these 3 sections to be side by side
I want these three sections of the class box to be in line side by side. I don't know what is wrong with my code. I've cross checked it many time with the code from the instructor.
Thanks for your help.
ul {
margin: 0;
padding: 0;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
/* BOXES */
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
width: 25%;
padding: 10px;
text-align: center;
}
#boxes .box img {
width: 90px;
}
<section id="boxes">
<div class="container">
<div class="box">
<img src="./images/html5.png" alt="html5">
<h3>HTML 5 Markup</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste corrupti incidunt cumque, delectus ullam</p>
</div>
</div>
<div class="container">
<div class="box">
<img src="./images/css3.png" alt="css3">
<h3>CSS 3 Styling</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste corrupti incidunt cumque, delectus ullam</p>
</div>
</div>
<div class="container">
<div class="box">
<img src="./images/brush.png" alt="brush">
<h3>Graphic Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste corrupti incidunt cumque, delectus ullam</p>
</div>
</div>
</section>

Answer 1

You can use display: flex in the #boxes selector in your CSS file.

Answer 2

If you want them to be side by side you can just use flex
#boxes {
margin-top: 20px;
display: flex;
justify-content: center;
}

Answer 3

You can try this:
ul {
margin: 0;
padding: 0;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
/* BOXES */
#boxes {
display: flex;
margin-top: 20px;
}
#boxes .box {
float: left;
width: 25%;
padding: 10px;
text-align: center;
}
#boxes .box img {
width: 90px;
}
<section id="boxes">
<div class="container">
<div class="box">
<img src="./images/html5.png" alt="html5">
<h3>HTML 5 Markup</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste corrupti incidunt cumque, delectus ullam</p>
</div>
</div>
<div class="container">
<div class="box">
<img src="./images/css3.png" alt="css3">
<h3>CSS 3 Styling</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste corrupti incidunt cumque, delectus ullam</p>
</div>
</div>
<div class="container">
<div class="box">
<img src="./images/brush.png" alt="brush">
<h3>Graphic Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste corrupti incidunt cumque, delectus ullam</p>
</div>
</div>
</section>

Answer 4

You can use display:flex to the #boxes. It will make its child to be in one row.
Learn more about flex https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox;
body {
/* font-family: Arial, Halvetica, sans-serif;
font-size: 15px;
line-height: 1.5em; */
font: 15px/1.5 Arial, Halvetica, sans-serif;
padding: 0;
background-color: #f4f4f4;
}
ul {
margin: 0;
padding: 0;
}
a:hover {
color: #cccccc;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.button_1 {
height: 38px;
background: #e8491d;
border: none;
padding: 0px 20px 0px 20px;
font-style: oblique;
font-weight: bold;
color: white;
}
/*header*/
header {
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
/* showcase */
#showcase {
min-height: 400px;
background: url("../images/showcase.jpg") no-repeat 0-400px;
text-align: center;
color: white;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
/*NewsLetter */
#newsletter {
padding: 15px;
color: white;
background: #35424a;
}
#newsletter h1 {
float: left;
}
#newsletter form {
margin-top: 22px;
float: right;
}
#newsletter input[type="email"] {
padding: 4px;
height: 25px;
width: 250px;
}
/* BOXES */
#boxes {
margin-top: 20px;
display:flex;
}
#boxes .box {
width: 25%;
padding: 10px;
text-align: center;
}
#boxes .box img {
width: 90px;
}
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Sumanyu</span> Web design</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li class="current">About</li>
<li class="current">Services</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class= "container">
<h1>Affordable professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste corrupti incidunt cumque, delectus ullam aut reprehenderit debitis doloremque, necessitatibus, nulla, ab fuga reiciendis rerum culpa possimus illum labore sit laudantium.</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe to Our Newsletter</h1>
<form class="process.php" action="index.html" method="post">
<input type="email" placeholder="Enter your Email">
<button type="submit" class="button_1">Subscribe</button>
</form>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="./images/html5.png" alt="html5">
<h3>HTML 5 Markup</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste corrupti incidunt cumque, delectus ullam</p>
</div>
</div>
<div class="container">
<div class="box">
<img src="./images/css3.png" alt="css3">
<h3>CSS 3 Styling</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste corrupti incidunt cumque, delectus ullam</p>
</div>
</div>
<div class="container">
<div class="box">
<img src="./images/brush.png" alt="brush">
<h3>Graphic Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste corrupti incidunt cumque, delectus ullam</p>
</div>
</div>
</section>
<footer>
<p>Sumanyu Sood Web Design, Copyright © 2020 </p>
</footer>
</body>
</html>