Currently delving into the world of the semantic-ui framework, I have been working with segments. Here is a snippet of my code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<script
src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<title>Assignments</title>
<style>
.raised.segment{
margin: 1.5%;
width: 30%;
display: inline-block;
float: left;
}
h3 {
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<div class="ui raised segment">
<h2 class="ui header">
Section 6
</h2>
<div class="ui middle aligned selection list">
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/helen.jpg">
<div class="content">
<h3 class="ui header"> Vasil Pkhakadze </h3>
</div>
</div>
... (additional item elements)
</div>
</div>;
... (repeated raised segments)
</body>
</html>
While everything in my layout appears to be functioning correctly, there seems to be an issue with the first segment. The float: left property is disregarding its margin, causing it to touch the borders. Any advice or suggestions on how to rectify this?