Whenever I try to add margins between the three columns in the third <div>, it breaks into a new line and disrupts the layout. I've experimented with adding margins, adjusting the value using percentages, and even tried implementing box-sizing: border-box, but nothing seems to work.
This is the current outcome:
Large Screens:
Medium Screens:
This is what I was hoping for:
Large Screens:
Medium Screens:
/*For responsive layout*/
.container{
padding-left: 20px;
padding-right: 20px;
}
.row{
width: 100%;
}
/**For Large Devices**/
@media (min-width: 992px) {
.col-lg-4{
float: left;
width: 33.33%;
}
}
/*for medium devices*/
@media(min-width:768px) and (max-width: 991px){
.col-md-6, .col-md-12{
float: left;
}
.col-md-6{
width: 50%;
}
.col-md-12{
width: 100%;
}
}
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
h1{
text-align: center;
margin: 2%;
}
div .title{
float: right;
margin-top: 0px;
margin-right: 0px;
text-align: center;
padding-left: 5%;
padding-right: 5%;
background-color: rgb(255, 123, 0);
border: 1px solid black;
font-size: x-large;
}
#beef{
color: aliceblue;
}
.section{
background-color: grey;
margin-top: 20px;
border: 1px solid black;
}
p{
padding: 10px;
clear: right;
text-align: left;
margin: 2%;
}
I'm stuck and seeking assistance. Please help!