Zachary
Reputation: 65
how can I fix the margin of the div
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>module2-solution</title>
</head>
<style >
/*basic style*/
* {
box-sizing: border-box;
}
body {
background-color: #9E8851;
}
h1 {
margin: 100px;
text-align: center;
font-family: Helvetica;
font-weight: bold;
font-size: 300%;
}
section {
position: relative;
width: 100%;
}
p {
position: relative;
clear: right;
}
div {
position: relative;
background-color: #BF7F3F;
border: 1px solid black;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
.sub {
float: right;
width: 100px;
padding: 5px;
margin: 0px;
border: 1px solid black;
text-align: center;
font-size: 120%;
font-weight: bold;
background-color: #B0D619;
}
.content {
padding: 5px;
border: none;
background-color: #BF7F3F;
font-family: Helvetica;
color: black;
margin: 0px;
height: 200px;
overflow: auto;
}
.row {
width: 90%;
}
/*desktop version*/
@media (min-width: 992px){
.column-lg-4 {
float: left;
width: 33.33%;
}
}
/*tablet version*/
@media (min-width: 768px) and (max-width: 991px){
.colmn-md-6 {
float: left;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.colmn-md-12 {
float: left;
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
/*mobile version*/
@media (max-width: 767px){
.colmn-sm-12 {
float: left;
width: 100%;
}
}
</style>
<body >
<h1>Our Menu</h1>
<section class="column-lg-4 colmn-md-6 colmn-sm-12">
<div>
<p class="sub">Chicken</p>
<p class="content">
Popular chicken dishes include roasted chicken, fried chicken, chicken soup, Buffalo wings, tandoori chicken, butter chicken, and chicken rice. Chicken is also a staple of many fast food restaurants.
</p>
</div>
</section>
<section class="column-lg-4 colmn-md-6 colmn-sm-12">
<div>
<p class="sub">Beef</p>
<p class="content">Spiced beef is a cured and salted joint of round, topside, or silverside, traditionally served at Christmas in Ireland. It is a form of salt beef, cured with spices and saltpetre, intended to be boiled or broiled in Guinness or a similar stout, and then optionally roasted for a period after.</p>
</div>
</section>
<section class="column-lg-4 colmn-md-12 colmn-sm-12">
<div>
<p class="sub">Sushi</p>
<p class="content">Sushi can be prepared with either brown or white rice. It is often prepared with raw seafood, but some common varieties of sushi use cooked ingredients and many are vegetarian. Sushi is often served with pickled ginger, wasabi, and soy sauce.</p>
</div>
</body>
</html>when I change the webpage size into the range between the width from 768px to 991px, I want the third section to take the entire row by itself. However, the left and the right edge of the third section is not vertically align with the first section's left edge and the second section's right edge. How can I fix that?
Upvotes: 0
Views: 47
Answers (1)
surender
Reputation: 24
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>module2-solution</title>
</head>
<style >
/*basic style*/
* {
box-sizing: border-box;
}
body {
background-color: #9E8851;
}
h1 {
margin: 100px;
text-align: center;
font-family: Helvetica;
font-weight: bold;
font-size: 300%;
}
section {
position: relative;
width: 100%;
padding:20px;
}
p {
position: relative;
clear: right;
}
div {
position: relative;
background-color: #BF7F3F;
border: 1px solid black;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
.sub {
float: right;
width: 100px;
padding: 5px;
margin: 0px;
border: 1px solid black;
text-align: center;
font-size: 120%;
font-weight: bold;
background-color: #B0D619;
}
.content {
padding: 5px;
border: none;
background-color: #BF7F3F;
font-family: Helvetica;
color: black;
margin: 0px;
height: 200px;
overflow: auto;
}
.row {
width: 90%;
}
/*desktop version*/
@media (min-width: 992px){
.column-lg-4 {
float: left;
width: 33.33%;
}
}
/*tablet version*/
@media (min-width: 768px) and (max-width: 991px){
.colmn-md-6 {
float: left;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.colmn-md-12 {
float: left;
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
/*mobile version*/
@media (max-width: 767px){
.colmn-sm-12 {
float: left;
width: 100%;
}
}
</style>
<body >
<h1>Our Menu</h1>
<section class="column-lg-4 colmn-md-6 colmn-sm-12">
<div>
<p class="sub">Chicken</p>
<p class="content">
Popular chicken dishes include roasted chicken, fried chicken, chicken soup, Buffalo wings, tandoori chicken, butter chicken, and chicken rice. Chicken is also a staple of many fast food restaurants.
</p>
</div>
</section>
<section class="column-lg-4 colmn-md-6 colmn-sm-12">
<div>
<p class="sub">Beef</p>
<p class="content">Spiced beef is a cured and salted joint of round, topside, or silverside, traditionally served at Christmas in Ireland. It is a form of salt beef, cured with spices and saltpetre, intended to be boiled or broiled in Guinness or a similar stout, and then optionally roasted for a period after.</p>
</div>
</section>
<section class="column-lg-4 colmn-md-12 colmn-sm-12">
<div>
<p class="sub">Sushi</p>
<p class="content">Sushi can be prepared with either brown or white rice. It is often prepared with raw seafood, but some common varieties of sushi use cooked ingredients and many are vegetarian. Sushi is often served with pickled ginger, wasabi, and soy sauce.</p>
</div>
</body>
</html>Upvotes: 1