I am taking a Coursera web development class that was created in 2015, and I'm supposed to use what I learn. This is my homework.
Everything works, except when I apply a margin to the column property, the third column goes to the second line. Help me fix it, please.
Here's my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
<link href="/css/style.css" rel="stylesheet">
<title>Menu</title>
</head>
<body>
<h1>Our Menu</h1>
<div class="container">
<div class="row">
<div class="column col-lg-4 col-md-12">
<div class="heading1">
<span class="sectionHeader">Chicken</span>
</div>
<p class="section">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo excepturi, inventore rerum odit voluptas quam aliquam numquam nesciunt maxime aut quae adipisci quos corporis. Magni soluta facilis illo alias sunt?</p>
</div>
<div class="column col-lg-4 col-md-6">
<div class="heading2">
<span class="sectionHeader">Beef</span>
</div>
<p class="section">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus suscipit, vel recusandae exercitationem ex pariatur, voluptates quos dolores ipsa maiores eos eveniet eum beatae modi explicabo non voluptas nobis dolorum.</p>
</div>
<div class="column col-lg-4 col-md-6">
<div class="heading3">
<span class="sectionHeader">Sushi</span>
</div>
<p class="section">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum autem ea velit unde deserunt sapiente totam ducimus dolor sint eum, ipsa voluptas omnis perferendis ipsam veniam eius hic. Molestiae, earum?</p>
</div>
</div>
</div>
</body>
</html>
And here is the CSS:
* {
box-sizing: border-box;
}
body {
background-color: 1px solid antiquewhite;
}
h1 {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: xx-large;
font-weight: bold;
text-align: center;
color: dimgrey;
padding-top: 20px;
padding-bottom: 20px;
}
.row {
padding: 4px;
height: auto;
}
.column {
border: 2px solid rgb(46, 46, 46);
/* margin: 2px; */
background-color: rgb(181, 179, 179);
width: 100%;
}
.heading1 {
background-color: indianred;
padding: 6px;
border: 2px solid rgb(46, 46, 46);
text-align: center;
margin-top: -2px;
margin-right: -2px;
position: relative;
width: 20%;
float: right;
padding-right: -6px;
}
.heading2 {
background-color: rgb(179, 91, 23);
padding: 6px;
border: 2px solid rgb(46, 46, 46);
text-align: center;
width: 20%;
margin-top: -2px;
float: right;
margin-right: -2px;
}
.heading3 {
background-color: rgba(53, 118, 53, 0.611);
padding: 6px;
border: 2px solid rgb(46, 46, 46);
text-align: center;
margin-top: -2px;
width: 20%;
float: right;
margin-right: -2px;
}
.section {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: medium;
font-weight: 500;
text-align: left;
color: rgb(84, 81, 78);
padding: 4px;
padding-top: 30px;
margin: 4px;
}
.sectionHeader {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: large;
font-weight: 500;
text-align: right;
color: antiquewhite;
padding: 4px;
}
.container {
padding: 4px;
display: flex;
}
/********** Large devices only **********/
@media (min-width: 1200px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
/********** Medium devices only **********/
@media (min-width: 950px) and (max-width: 1199px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}